奇酷学院老师html5高级就业大讲堂h5js课件jquery插件demo用法

1、jQuery 和AMD 兼容的插件用来创建一个视差效应。这个插件是非常简单的使用有一些选项的修改。它利用 CSS3 动画,支持落回顶部和老的浏览器。（没有视差效应和小图像尺寸的触屏设备，详见。接触部分）使用方法标记标记可以包含尽可能多的图像元素，只要你想，但你应该把它们与内容分开，如下代码。Contentt slides on top of the images optional content to be displayed on top of the images初始化要初始化插件，把它们应用到你想要的元素$(.img-holder).imageScroll();AMD这个插件是AMD 兼

2、容。与 RequireJS 使用，你可以做到这一点。见演示文件的例子。require ( jquery.imageScroll , function ( ImageScroll ) $ ( .img-holder ). each ( function () new ImageScroll ( this ). init ();););选项您可以配置默认的选项，通过传递一个选项对象插件进行调整$(.img-holder).imageScroll( coverRatio: 0.5);通过数据属性，数据集的选项optionname 图像，宽度（mediaWidth），高度（mediaHeight），覆

3、盖率（coverRatio），额外的高度（extra-height）或全局设置选项ImageScroll.defaults.coverRatio = 0.5;可配置的选项：image：图像显示（默认值= null）imageattribute：数据属性名称的图像。使用此属性的值加载图像（默认值=image）container:视差图像（s）将连接（默认值= $（body）speed：速度的视差效应。一个浮点数 0 和 1 之间，在高数量的移动图像的速度向上（默认值= 0.2）coverratio：百分之多少屏幕的每个图像应覆盖（默认值= 0.75）holderminheight：在图像中的像素

4、的最小高度（默认值= 200）extraheight：额外的高度增加到图像。如果你想的顶端图像（默认值= 0）mediawidth：图像的原始宽度（默认值= 1600）mediaheight：图像的原始高度（默认值= 900）parallax：你是否想要的视差效应，如不在古老的浏览器工作的很好（默认值= TRUE）touch：一种/平板电脑 friendy 版本，没有视差效果和较小的图像（与移动/平板电脑优化的图像使用）（默认= false）触摸效果是不是触摸屏设备上非常流畅。因此，你可以提供给用户一个备用版本，它没有视差效果显示图像。您可以通过检查触摸（例如使用 Modernizr 的）这样做，并设置动态选择，以适应这一点。var touch = Modernizr.touch;$(.img-holder).imageScroll(imageAttribute: (touch =