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

在图像上实现平移窗口？

1 个答案: