这是一个实现满屏滚动的插件,可以配合jquery和zepto使用
三层结构,参考demo
var list = $('.fullswitch-container .fullswitch-pagelist'); //使用插件时结构层次须与本例一致,但不一定用ul或li标签,
list.fullSwitch({
pages: 'fullswitch-page',
scrollPage: '.fullswitch-longpage', //超长页(长度超出屏幕的页),只能一个
easing: 'ease-in-out',
hash: true, //不支持url hash就写成false
unTouchedPages: '.page7', //不能用触摸翻屏的page,可以多个
orientStretch: false//
});
配置项列表如下:
{
speed: 200,
axis: 'y', //方向: y: vertical, x: horizontal
pages: 'section', //pages selector name
scrollPage: false, //超长页(长度超出屏幕的页),只能一个
unTouchedPages: false, //不能滑动的页
threshold: 50, //变页的门槛值px值
fromScrollToOther: true, //是否可以从超长页到其他页
swipeMaxTime: 500, //swipe事件的临界时间,ms
swipeBaseTime: 500, //模拟scroll事件时计算的基础时间
scrollSwipe: true, //是否支持scrollSwipe事件
scrollSwipeGap: 50,
loop: false, //是否可以从最后一页到第一页
easing: 'cubic-bezier(0,.84,1,.22)', //easing 贝瑟尔曲线
mouseMoveAvailable: true, //是否支持mouseMove事件
orientStretch: true,//在终端方向改变时是否拉伸页面背景,false为等比缩小,true为拉伸铺满
hash: false //启动hash功能
}
- goNext() 到下一页
- goPrev() 到上一页
- goPage(to,from) 从from页到to页
- goStep(step) 可以用来设置".fullswitch-pagelist"的transform值
- goPresent() 回到本页
- offTouch() 关闭touch事件监听
- onTouch() 启动touch事件监听
- 绑定gopage事件,当从from页开始换到to页时触发(变页动画开始时触发)
list.on("gopage", function (e, to, from) {
...
});
- 绑定transend事件,当变到page页时触发(与上面的区别是此事件在变页动画结束时触发)
list.on("transend", function(e, page){
...
});
- 绑定orientationchange事件,在page页时发生orientchange事件时触发
list.on("orientchange", function(e, page){
...
});