物化视差不起作用

Question

我在页面上添加了视差代码，但没有显示图像，当我从图像容器中删除类"视差"时，图像出现但没有视差效果，

  <div class="parallax-container">
    <div class="parallax"><img src="content/img/wood.jpg"></div>
  </div>
  <div class="section white">
    <div class="row container">
      <h2 class="header">Parallax</h2>
      <p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
    </div>
  </div>
  <div class="parallax-container">
    <div class="parallax"><img src="content/img/wood.jpg"></div>
  </div>

<script type="text/javascript">
var elem = document.querySelector('.parallax');
var instance = M.Parallax.init(elem, options);
// Or with jQuery
$(document).ready(function(){
$('.parallax').parallax();
});
</script>

这些是我添加的库

  <script src="applibangular.min.js"></script>
  <script src="applibangular-route.min.js"></script>
  <script src="applibangular-aria.min.js"></script>
  <script src="applibangular-messages.min.js"></script>
  <script src="applibangular-animate.min.js"></script>
  <link rel="stylesheet" href="applibangular-material.min.css">
  <script src="applibangular-material.min.js"></script>
  <link rel="stylesheet" href="content/css/styles.css">
  <!--Materialize-->
  <link href="materializecssicon.css" rel="stylesheet">
  <link rel="stylesheet" href="materialize/css/materialize.min.css">
  <link rel="stylesheet" href="applibRoboto.css">
  <script src="appapp.js"></script>
<script type="text/javascript" src="materializejsjquery.3.2.1.min.js"></script>
   <script src="materializejsmaterialize.min.js"></script>

Answer 1

你的错误在于试图在Javascript代码中初始化函数两次。另外(至少就我而言(，在初始化组件以进行具体化时，我偶尔会在使用原版JS时收到错误。你可以做什么：(删除原版JS代码并将其添加到文件的末尾，最好在body标签的末尾下方(

<script>
 $(document).ready(function(){
  $('.parallax').parallax();
 });
</script>

确保在具体化脚本之前调用 jquery，如下所示：

 <script type="text/javascript" src="materializejsjquery.3.2.1.min.js"> 
 </script>
 <script src="materializejsmaterialize.min.js"></script>