jquery parallax.js 不起作用答案

【问题标题】：jquery parallax.js not workjquery parallax.js 不起作用
【发布时间】：2017-06-07 12:53:52
【问题描述】：

我已经尝试了 10 多次来使用 parallax.js jquery 插件。但它不起作用。我不明白我怎么了。

插件站点：http://matthew.wagerfield.com/parallax/

我的演示工作站点：http://contact.themeshef.com/

任何人都可以帮助我了解如何使用视差 js 吗？提前致谢！

页面来源：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #container {
            width: 100%;
            height: 500px;
        }
    </style>

</head>
<body>
    <div id="container">
        <div id="scene">
          <div class="layer" data-depth="0.00"><img src="layer1.png"></div>
          <div class="layer" data-depth="0.20"><img src="layer2.png"></div>
          <div class="layer" data-depth="0.40"><img src="layer3.png"></div>
          <div class="layer" data-depth="0.60"><img src="layer4.png"></div>
          <div class="layer" data-depth="0.80"><img src="layer5.png"></div>
          <div class="layer" data-depth="1.00"><img src="layer6.png"></div>
        </div>
    </div>


    <script src="jquery-3.2.1.min.js"></script>
    <script src="parallax.js"></script>
    <script>
      var scene = document.getElementById('scene');
      var parallax = new Parallax(scene);
    </script>
</body>
</html>

【问题讨论】：

“但它不起作用”。确切的问题是什么？请提供有关不当行为的更多信息。

标签： javascript jquery parallax.js

【解决方案1】：

您正在使用非编译版本的库。要么你应该编译和使用，要么你可以从here下载parallax.min.js文件的编译版本，或者你可以使用cdn。

在这个例子中，我使用的是 CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/parallax.min.js"></script>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #container {
            width: 100%;
            height: 500px;
        }
    </style>

</head>
<body>
    <div id="container">
        <div id="scene">
          <div class="layer" data-depth="0.00"><img src="layer1.png"></div>
          <div class="layer" data-depth="0.20"><img src="layer2.png"></div>
          <div class="layer" data-depth="0.40"><img src="layer3.png"></div>
          <div class="layer" data-depth="0.60"><img src="layer4.png"></div>
          <div class="layer" data-depth="0.80"><img src="layer5.png"></div>
          <div class="layer" data-depth="1.00"><img src="layer6.png"></div>
        </div>
    </div>


    <script src="jquery-3.2.1.min.js"></script>
    <script src="parallax.js"></script>
    <script>
      var scene = document.getElementById('scene');
      var parallax = new Parallax(scene);
    </script>
</body>
</html>

【讨论】：