视差在实体化中不起作用 css

Question

我正在使用 Materialise Framework 创建 PhoneGap 应用程序。

他们有一个视差设置，你可以在这里看到他们的符号：

当我运行它时，我的图像根本不显示。我的 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>

Answer 1

你调用视差函数了吗？

$('.parallax').parallax();

对我来说很好用。 codepen [示例]: http://codepen.io/anon/pen/BNrorz

Answer 2

看我的例子：http://jsfiddle.net/yhgj48tr/

别忘了初始化它：

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

Answer 3

请检查以下内容。

使用JS中的Parallax函数初始化

$(文档).ready(函数(){ $('.视差').视差(); });
检查 Jquery 是否在 Materialise JS 之前的导入中首先声明。

..."text/javascript" 源="jquery-2.1.4.min.js" ...

..."text/javascript" src="materialize-v0.97.0/materialize/js/materialize.min.js ...
检查图片链接
勾选<div>

这是我使用 Materialize CSS 创建视差的博客 post。 https://cmsoftwaretech.wordpress.com/2015/08/10/parallax-webpage-effect-using-materialize-css/

已显示代码。

Answer 4

我的回答有点晚了，但我从他们网站下载的版本也遇到了同样的问题。

检查脚本标签。

<script src="../../dist/js/materialize.js"></script>

应该只是...

<script src="js/materialize.js"></script>

Answer 5

对我来说帮助添加到样式表

.parallax{
  position:static;
}

因为在 "absolute" 之前它破坏了视差:)

Answer 6

我有这个问题的解决方案，您不能在源上输入本地图片，但必须输入外部 link， *例如：*

<div class="parallax-container>
<div class="parallax">
<img src="http://wallpapercave.com/wp/JRiV1lH.png">
</div>
</div>

这对我有用

Answer 7

请注意 DOM 中指定视差 HTML 的位置。我刚刚调试了我们有正确 HTML 代码的问题，我们有正确的 JavaScript 代码，但问题是 HTML 在 DOM 结构中的位置。尝试将 DOM 结构中与视差相关的 HTML 移动到更高位置，看看它是否能解决您的问题。

Answer 8

确保在提到图像路径时使用“\”而不是“/”

Answer 9

我遇到了类似的问题，但是当我调整我在头部调用 JavaScript 库的顺序时，我解决了这个问题。我需要先调用我的 jquery 库，然后再调用我的 Materialize 链接。

Answer 10

使用此jQuery或JavaScript添加视差效果

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.parallax');
    var instances = M.Parallax.init(elems, options);
  });

  // Or with jQuery

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

Source

Do remember to import jQuery before materialize.min.js

视差在实体化中不起作用 css

Parallax not working in materialize css

html

javascript

parallax

cordova