在图像上实现平移窗口？

Question

我正在尝试实现一种效果，即在背景图像上有一个移动/动画窗口，使您一次只能看到图像的特定部分。

实际上，窗口本身不应该移动，因为它将是位于页面某处的div-但效果应该是背景向后移动。 但是，背景不应占用DOM上的任何空间（即，它不应影响其周围的任何元素）。

实现此目的的最佳方法是什么？ 我应该为窗口div创建背景图像，然后调整背景位置吗？ 可以使用jQuery动画吗？

____________________
|                   |
|   IMAGE           |
|   ___________     |
|   |  window |     |
|   |_________|     |
|___________________|

Answer 1

更新： jsFiddle用于基于CSS的动画。

检查此jsFiddle，确保它是您想要的。

HTML

<div class="window">
</div>

JS

var position = 135;
$('.window').click(function() {
    position += 20;
    $(this).css('background-position-x', position);
});

CSS

.window {
    background-image: url(image);
    display: block;
    height: 200px;
    width: 200px;
    background-position: 135px -40px;
}