视差背景不起作用（仅一张图像）

Question

因此，我在http://terraria.org/about上看到了一个很好的背景，我自己也想这样做，因为我运行的是Terraria Server。

因此，我在网上搜索了可以实现此目的的功能。 我已经尝试过各种方法，但这是我使用的代码：

link:
http://codepen.io/anon/pen/DCGuz

正如您只能看到第一幅图像（位于顶层）移动一样，我想知道如何使所有图像都移动，如http://terraria.org/about所示。 同样，当我将鼠标悬停在徽标或网页本身上时，背景也不会移动，而当我将鼠标悬停在网站上时，背景应该移动，这不应该是鼠标悬停的图像。

PS：当我在浏览器中尝试在网站（全屏）上移动背景时，它的运行速度很慢且移动不流畅，但是在terraria.org/about上却可以快速流畅地移动。 有没有解决此问题的方法？

提前致谢！

编辑：正如您可以在我的网站http://teeria.net/上看到的那样，只有第一个图像移动了，而且不平滑。

Answer 1

t.niese已经说过了：您创建了所有这些鼠标事件处理程序，但是只有最顶层的一个被调用。

相反，只需使用$(window).mousemove() 一次，然后在此处完成所有操作。 另外，您反复使用jQuery查找移动的div（每次鼠标移动），这可能会使动画放慢一点。

通过使用javascript闭包，您可以节省很多键入/复制操作： JavaScript闭包如何工作？

建议的更改如下所示： http : //codepen.io/anon/pen/KgFhI

编辑 ：确保在您自己的网站上使用图像时，没有侵犯任何版权！

奖金编辑 ：window.requestAnimationFrame整洁： http : //codepen.io/anon/pen/yEbnd

Answer 2

最简单的方法是使用CSS3。 基本上，您将需要在层之上的层。
查看
在这里-> https://github.com/abaddonGIT/paralax （翻译成英文）
演示-> http://angular.demosite.pro/paralax/
在这里找到-> http://jqueryplugin.net/woolparalax-jquery-plugin-parallax-effect-css3/#sthash.XWD5Fr6P.uxfs

很简单
所以就像

    window.onload = function () {
    $ ('# Wool-paralax). WoolParalax ();
    }
    <Div id = "wool-paralax">
    <div class="wool-layer" data-shift="0.02">
    <Img src = "img / 1.png" alt = "" />
    </div>
    <div class="wool-layer" data-shift="0.03">
    <Img src = "img / 2.png" alt = "" />
    </div>
    <div class="wool-layer" data-shift="0.04">
    <Img src = "img / 3.png" alt = "" />
    </div>