1

嗨，我想创建一种效果，使背景以不同的速度移动到鼠标上，以产生几乎像 3d 一样的效果。

这就是我想要做的，我发现了这个

有人可以向我解释或向我展示一些可以做到这一点的脚本吗？

4

2 回答 2

1

你说的是视差效应。有许多现有的脚本和插件可让您执行此操作。例如，一个简单的搜索提示该页面列出了 7 个不同的 jQuery 插件。

基本前提是根据鼠标当前的位置，将碎片分割成层，通过JS独立移动，然后根据需要隐藏不同的区域。

例子

这种效果的一个简单示例可能如下（请不要使用此代码，它不是很干净）：

HTML

<div id="parallax">
    <img src="img1.png" alt="background"/>
    <img src="img2.png" alt="foreground"/>
</div>

JS

$('#parallax').on('mousemove', function (e) {
    $('img').eq(0).css('left', e.pageX);
    $('img').eq(1).css('left', e.pageX * 2);
});

在这个简单的例子中，前景图像的移动速度是背景图像的两倍。如您所见，您只需将每一块分开移动即可获得所需的效果。

于 2012-07-11T21:25:01.857 回答
0

为什么不直接看那个页面源码中的js。它的 4 个图像绝对定位在鼠标移动事件中。

 $(document).mousemove(function(e) {
    var x = ((e.pageX/$(window).width())*100)*-1;
    var y = ((e.pageY/$(window).height())*100)*-1;
    var pos = (x/80*-1)+"% "+(y/80*-1)+"%";
    var pos2 = (x/3+60)+"% "+(y/3+60)+"%";
    var pos3 = (x/5+30)+"% "+(y/5+30)+"%";
    var pos4 = (x/2+60)+"% "+(y/2+60)+"%";
    $("#grid").css("background-position",pos);
    $("#bottom").css("background-position",pos2);
    $("#bottomoverlay").css("background-position",pos3);
    $("#bottomblur").css("background-position",pos4); });
于 2012-07-11T06:54:53.987 回答