文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
parallaxSlider
功能
带视差的翻页
author leeenx
version 1.0.0
date: 2015-12-07
Official Usage
$("#wrap").parallaxSlider(
{
direction:'Y',
cover: 1,//封面索引
offset:50,
duration:300,
infinite:true,
onchange:function(o,i){
//通过this[0]可以取对应的分页哦
//o滑出页索引,i滑入页索引
console.log(o,i);
}
}
);
需要注意,#wrap容器下的所有子节点都会被识别为它的子页。带`halo-slider-speed`属性的是视差页,它的值是视差率。 具体请参见DEMO
参数列表
name | 类型 | 必选 | 描述 |
---|---|---|---|
direction | string | optional | 翻页的方向,默认值为Y。可选值:X,Y |
cover | int | optional | 封面的页面索引。默认为:0 |
scale | boolean | optional | 缩放翻页,默认为true |
offset | int | optional | 翻页所需的手指位移最少偏移量。默认 50,单位px |
duration | int | optional | 翻页动画持续时长。默认 300,默认毫秒 |
infinite | boolean | optional | 无限循环。默认 true |
onchange | function | optional | 翻页事件监听 |
方法列表
name | 描述 |
---|---|
lock | 锁定页面。锁定后不能翻页 |
unlock | 解锁页面,与lock相对应 |
move | 将页面定位到指定的索引值。parallaxSlider.move(index); |
DEMO
点击查看parallaxSlider模块下载
http://wq.360buyimg.com/js/ho2/min/uncmd.jshttp://wq.360buyimg.com/js/ho2/min/prefix.js
http://wq.360buyimg.com/js/ho2/min/isDom.js
http://wq.360buyimg.com/js/ho2/min/stylesheet.js
http://wq.360buyimg.com/js/ho2/min/parallaxSlider.js
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论