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