视差背景不起作用(只有一张图像)

Question

所以我在http://terraria.org/about我自己也这么想，因为我运行的是Terraria服务器。

所以我在网上搜索了一个可以实现这一点的函数。我尝试过各种各样的东西，但这是我使用的代码：

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

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

附言：当我在浏览器中尝试在我的网站（全屏）上移动背景时，它很慢，移动不平滑，但它在terria.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>