jQuery parallax.js無法正常工作
[英]jquery parallax.js not work
問題描述
我已經嘗試了十多次使用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>
1 個解決方案
解決方案1
1 已采納 2017-06-07 04:53:52
您正在使用庫的非編譯版本。 您應該編譯和使用，或者可以從這里下載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>
jQuery Parallax.js無法正常工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.