Paralax实现

Question

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.parallax').parallax();
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">



<nav>
  <div class="nav-wrapper container">
    <a href="#" class="brand-logo">Vowel</a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li><a href="collapsible.html">About us</a></li>
      <li><a href="">Subscribe</a></li>
    </ul>
    </div>
    </nav>

    <div class="parallax-container">
    <div class="parallax">
    <img src="images/london.jpg">
    </div>
    </div>

    <div class="row container">
    <h2>Title text</h2>
  
    <p>Lorem ipsum</p>
    </div>

    <div class="row container">
    <h2>Title text</h2>
    <p>Lorem ipsum</p>
    </div>

    <div class="parallax-container">
    <div class="parallax"><img src="images/nyc.jpg">
    </div>
    </div>

    <div class="row container">
    <h2>Title text</h2>
    <p>Lorem ipsum</p>
    </div>

    <div class="row container">
    <h2>Title text</h2>
    <p>Lorem ipsum</p>
    </div>

    <div class="parallax-container">
    <div class="parallax"><img src="images/nyc.jpg">
    </div>
    </div>

    <footer class="page-footer">
    <div class="container">
    <div class="row">
    <div class="col l6 s12">
    <h5 class="white-text">Footer Content</h5>
    <p class="grey-text text-lighten-4">You can use rows and 
    columns here to organize your footer content.</p>
    </div>
    <div class="col l4 offset-l2 s12">
    <h5 class="white-text">Links</h5><ul>
    <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
      <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
      <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
      <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
    </ul>
  </div>
  </div>
  </div>
  <div class="footer-copyright">
    <div class="container">
      © 2014 Copyright Text
      <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
    </div>
  </div>
  </footer>


  <script type="text/javascript" src="js/materialize.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

我知道这个问题以前就在这里，但我根本无法解决我的问题。我不知道为什么我的paralax不起作用。我没有任何CSS用于该脚本或其他脚本。有什么想法可能是我的问题？我也下载了jquery并将其放到我拥有网站文件的文件夹中，但它没有用。我尝试了不同的版本，我在另一个下方/上方粘贴了一个脚本，看看是否可以工作 - 它没有。

Answer 1

您确定视差函数调用是在链接的库文件下面写的吗

<link href="css/materialize.min.css" rel="stylesheet"/>
<script src="js/jquery.min.js"></script>
<script src="js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">


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