javascript 视差在实现 css 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31232539/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Parallax not working in materialize css
提问by Mike
I am using the Materialize Framework to create a PhoneGap app.
我正在使用 Materialize 框架来创建 PhoneGap 应用程序。
They have a parallax setting which you can see their notation here:
他们有一个视差设置，你可以在这里看到他们的符号：
http://materializecss.com/parallax.html
http://materializecss.com/parallax.html
When I run it, my image does not show up at all. My html looks like this:
当我运行它时，我的图像根本不显示。我的 html 看起来像这样：
<div class="row">
<div class="col s12 m7">
<div class="card">
<div class="parallax-container" style = "height:100px;">
<div class="parallax"><img src="/img.png"></div>
</div>
<div class="card-content">
<h5> test</h5>
<h6> test</h6>
<h6> test </h6>
</br>
<p> test</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
</div>
</div>
</div>
</div>
回答by guinatal
Look my example: http://jsfiddle.net/yhgj48tr/
看我的例子：http: //jsfiddle.net/yhgj48tr/
Do not forget to initialize it:
不要忘记初始化它：
$(document).ready(function(){
$('.parallax').parallax();
});
回答by Skylin R
For me helped adding to style sheets
对我来说帮助添加到样式表
.parallax{
position:static;
}
because before it was on "absolute" and it spoiled parallax :)
因为在它处于“绝对”状态之前，它破坏了视差:)
回答by narendro
i have solution for this problem, you can't enter a local picture on your source but you must enter the external link, *for example : *
我有这个问题的解决方案，你不能在你的源上输入本地图片，但你必须输入外部链接，*例如：*
<div class="parallax-container>
<div class="parallax">
<img src="http://wallpapercave.com/wp/JRiV1lH.png">
</div>
</div>
this is work for me
这对我有用
回答by Daniel Kmak
Be careful with where in DOM you've parallax HTML specified. I've just debugged issue where we had right HTML, we had right JavaScript code, but the problem was location of the HTML in DOM structure. Try to move parallax related HTML higher in DOM structure to see if it fixes your problem.
请注意您在 DOM 中指定视差 HTML 的位置。我刚刚调试了问题，我们有正确的 HTML，我们有正确的 JavaScript 代码，但问题是 HTML 在 DOM 结构中的位置。尝试在 DOM 结构中将与视差相关的 HTML 移到更高的位置，看看它是否能解决您的问题。
回答by chndk
make sure you used "\" and not "/" while mentioning path of image
确保在提及图像路径时使用“\”而不是“/”
回答by krozero
did you call parallax function?
你调用了视差函数吗？
$('.parallax').parallax();
works fine for me. codepen [example]: http://codepen.io/anon/pen/BNrorz
对我来说很好用。codepen [示例]：http://codepen.io/anon/pen/BNrorz
回答by Cebu CM Solutions
Please check the following.
请检查以下内容。
Initialize using the Parallax function in JS.
$(document).ready(function(){ $('.parallax').parallax(); });
Check if the Jquery is declared first in the import before Materialize JS.
... "text/javascript" src="jquery-2.1.4.min.js" ...
... "text/javascript" src="materialize-v0.97.0/materialize/js/materialize.min.js ...
Check the image links
- Check the
<div>
使用JS中的Parallax函数进行初始化。
$(document).ready(function(){ $('.parallax').parallax(); });
检查是否在 Materialize JS 之前首先在导入中声明了 Jquery。
... "text/javascript" src="jquery-2.1.4.min.js" ...
... "text/javascript" src="materialize-v0.97.0/materialize/js/materialize.min.js ...
检查图像链接
- 检查
<div>
Here's a blog post where I created Parallax using Materialize CSS. https://cmsoftwaretech.wordpress.com/2015/08/10/parallax-webpage-effect-using-materialize-css/
这是我使用 Materialize CSS 创建视差的博客文章。 https://cmsoftwaretech.wordpress.com/2015/08/10/parallax-webpage-effect-using-materialize-css/
The codes are shown.
显示了代码。
回答by Swills
My answer is a bit late, but I had the same problem with the version I downloaded from their site.
我的回答有点晚了，但我从他们的网站下载的版本也遇到了同样的问题。
Check the script tags.
检查脚本标签。
<script src="../../dist/js/materialize.js"></script>
should just be...
应该只是...
<script src="js/materialize.js"></script>
回答by Wampsack25
I was having a similar problem, but I solved it when I adjusted the order in which I was calling my JavaScript libraries in the head. I needed to call my jquery library first, then call my Materialize links.
我遇到了类似的问题，但是当我调整了我在头脑中调用 JavaScript 库的顺序时，我解决了这个问题。我需要先调用我的 jquery 库，然后调用我的 Materialize 链接。
