pageSwitch
与 TouchSlider.js 的区别
pageSwitch.js 适用场景为全屏切换,即一切一屏,并且在此基础上实现了超过一百种切换效果。而 TouchSlider.js 则侧重于在滑动效果下,不仅支持全屏切换,还支持不固定尺寸的幻灯切换。
具体使用请参看各组件所提供的示例。
Just a page Switch Javascript Library, and it has supported 121 switching animations.
页面切换器,支持多达 121 种切页效果,更可支持自定义切页动画, 尽情发挥想象力!
无法滑动?
最新版本的 chrome 的实现了 pointer 事件,pageSwitch 会优先使用 pointer 事件,但是会和系统触摸滚动冲突。 解决该问题,可以通过对滚动容器设置 touch-action 样式来 fix。
.my-slider-container
查看效果
http://github.boy.im/pageSwitch/pic.html
手机扫描下面二维码查看例子:
预览效果
安装
npm install pageswitch
如何使用
// 如果使用webpack或者requirejs或者browserify等构建工具,可以这样:var pageSwitch = ; // 也可以直接在下载本文件,直接在页面中引入// 首先在页面中引入pageSwitch.js// 调用 pageSwitch 方法 var pw = 'container id' duration: 600 //int 页面过渡时间 direction: 1 //int 页面切换方向,0横向,1纵向 start: 0 //int 默认显示页面 loop: false //bool 是否循环切换 ease: 'ease' //string|function 过渡曲线动画,详见下方说明 transition: 'slide' //string|function转场方式,详见下方说明 freeze: false //bool 是否冻结页面(冻结后不可响应用户操作,可以通过 `.freeze(false)` 方法来解冻) mouse: true //bool 是否启用鼠标拖拽 mousewheel: false //bool 是否启用鼠标滚轮切换 arrowkey: false //bool 是否启用键盘方向切换 autoplay: false //bool 是否自动播放幻灯 新增 interval: int //bool 幻灯播放时间间隔 新增; //调用方法pw; //上一张pwnext; //下一张pw; //第n张pw; //重新设定过渡曲线pw; //重新设定转场方式pw; //冻结页面转换,冻结后不可响应用户操作(调用slide prev next方法还可以进行) pw; //播放幻灯pw; //暂停幻灯 /* 2015.03.22 新增方法 */pw; //前增页面pw; //后增页面pw; //在index前添加pw; //在index后添加pw; //删除第index页面pw; //是否静止状态 pw; //销毁pageSwitch效果对象 /* 事件绑定 * event可选值: * * before 页面切换前 * after 页面切换后 * update 页面切换中 * dragStart 开始拖拽 * dragMove 拖拽中 * dragEnd 结束拖拽 */pw;
setEase 示例
内置支持 linear
ease
ease-in
ease-out
ease-in-out
bounce
等
bounce
弹跳过渡,很有意思,可以试试
//注:此处传值也可直接在new pageSwitch对象时经ease参数传入//设置匀速linear过渡示例:pw; //由于内置了linear支持,所以可以直接使用 //假如没有内置linear,则使用自定义过渡曲线函数如下pw;
更多曲线函数参见:https://github.com/zhangxinxu/Tween/blob/master/tween.js
setTransition 示例
支持以下转场效果:
fade
渐隐渐显 | demo
slice
裁切效果 | demo
scroll
页面滚动 | demo
scroll3d
3d 页面滚动 | demo
scrollCover
页面视差滚入滚出(前后页面速度不一致) | demo
scrollCoverReverse
同上反向 | demo
scrollCoverIn
总是下一张页面视差滚入 | demo
scrollCoverOut
总是当前页面视差滚出 | demo
slide
滑动切换,后者页面有缩放效果 | demo
slideCover
页面滑入滑出 | demo
slideCoverReverse
同上反向 | demo
slideCoverIn
总是下一张页面滑入 | demo
slideCoverOut
总是当前页面滑出 | demo
flow
封面滑动切换 | demo
flowCover
页面滑入滑出 | demo
flowCoverReverse
同上反向 | demo
flowCoverIn
总是下一张页面滑入 | demo
flowCoverOut
总是当前页面滑出 | demo
zoom
缩放切换 | demo
zoomCover
页面缩进缩出 | demo
zoomCoverReverse
同上反向 | demo
zoomCoverIn
总是下一张页面缩入 | demo
zoomCoverOut
总是当前页面缩出 | demo
skew
扭曲切换 | demo
skewCover
页面扭进扭出 | demo
skewCoverReverse
同上反向 | demo
skewCoverIn
总是下一张页面扭入 | demo
skewCoverOut
总是当前页面扭出 | demo
flip
翻转切换 | demo
flip3d
3d 翻转切换 | demo
flipClock
翻页钟效果 | demo
flipPaper
翻书本效果 | demo
flipCover
页面翻入翻出 | demo
flipCoverReverse
同上反向 | demo
flipCoverIn
总是下一张页面翻入 | demo
flipCoverOut
总是当前页面翻出 | demo
bomb
放大切换 | demo
bombCover
页面大入大出 | demo
bombCoverReverse
同上反向 | demo
bombCoverIn
总是下一张页面大入 | demo
bombCoverOut
总是当前页面大出 | demo
注意:除了fade
,所有效果都支持指定 X 或 Y 轴方向效果,只要在名字后面加上X
或Y
即可。
例如:scrollY
flipX
flipCoverX
flipCoverInX
等类似。
//注:此处传值也可直接在new pageSwitch对象时经transition参数传入//设置fade效果示例:pw; //由于内置了fade效果,所以可以直接调用。 //假定没有内置fade,自定义转场函数如下pw; //如果你有jQuery类似组件,可以更简单pw;
jQuery/Zepto 适配器
$fn; //使用; next; //由于链式调用返回依然是jq对象自身,所以如果需要使用pageSwitch对象方法,需要通过 `.ps()` 方法获取对pageSwitch对象的引用。
兼容性
兼容全平台,包括 IE6+