javascript - 在图像上实现平移窗口？

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;
}