Question

所以我在http://terraria.org/about上看到了很好的背景，我自己也想过，因为我经营的是Terraria服务器。

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

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闭包可以节省很多打字/复制费用：How do JavaScript closures work?

以下是建议更改的效果：http://codepen.io/anon/pen/KgFhI

修改：在您自己的网站上使用图片时，请确保您没有侵犯任何版权！

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

Answer 2

最简单的方法是使用CSS3。基本上你需要在图层之上的图层。
检查出来这里 - ＆gt; https://github.com/abaddonGIT/paralax（翻译成英文）
演示 - ＆GT; http://angular.demosite.pro/paralax/
在这里找到 - ＆gt; 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>

视差背景不起作用（只有一个图像）

2 个答案: