menu

视差是一种效果，在背景内容或图片在一下情况：相对于前景内容滚动的速度有一个不同的移动速度。查看这个示例获取更好的体会。

打开示例 

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

初始化


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

  // 或用JQuery

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

选项

名称 类型 默认 描述
responsiveThreshold Number 0 视差功能开始工作的屏幕的最小宽度，以像素为单位。

方法

因为jQuery不再是一个依赖项，所以所有的方法都是在插件实例上调用的。你可以获得插件实例如下：


  var instance = M.Parallax.getInstance(elem);

  /* JQuery方法调用
          您仍然可以使用旧的jQuery插件方法调用。
      但您将无法访问实例属性。

    $('.parallax').parallax('方法名称');
    $('.parallax').parallax('方法名称', 参数名称);
  */
.destroy();

销毁插件实例并回收


instance.destroy();

属性

名称 类型 描述
el Element 插件初始化时使用的DOM元素。
options Object 初始化实例时使用的选项。

Parallax的定制

视差容器的高度决定有多少图片可以被看见。默认设置是500px。你可以增加自己的样式来重写这个设置。


    .parallax-container {
      height: "高度";
    }