pageSwitch.js是一款支持121种页面切换效果的javascript页面切换插件。pageSwitch插件适用场景为全屏切换,即一切一屏。它支持桌面和移动手机,支持多达121种切页效果,还支持自定义切页动画。
使用方法
使用该页面切换插件需要引入pageSwitch.js文件。
<script type="text/javascript" src="src/pageSwitch.js"></script>
HTML结构
pageSwitch页面切换插件的基本HTML结构采用嵌套<div>
的HTML结构。
<div id="imgs"> <div><img src="images/1.jpg" /></div> <div><img src="images/2.jpg" /></div> <div><img src="images/3.jpg" /></div> <div><img src="images/4.jpg" /></div> <div><img src="images/5.jpg" /></div> <div><img src="images/6.jpg" /></div> <div><img src="images/7.jpg" /></div> <div><img src="images/8.jpg" /></div> <div><img src="images/9.png" /></div> </div> <!--导航--> <div id="navs"> <a href="javascript:;" class="active"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div>
初始化插件
可以通过下面的方法来初始化一个pageSwitch对象。
var pw=new pageSwitch('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 幻灯播放时间间隔 新增 });
方法
pageSwitch插件的可用方法有:
pw.prev(); //上一张 pw.next(); //下一张 pw.slide(n); //第n张 pw.setEase(); //重新设定过渡曲线 pw.setTransition(); //重新设定转场方式 pw.freeze(true|false); //冻结页面转换,冻结后不可响应用户操作(调用slide prev next方法还可以进行) pw.play(); //播放幻灯 pw.pause(); //暂停幻灯 pw.prepend(DOM_NODE); //前增页面 pw.append(DOM_NODE); //后增页面 pw.insertBefore(DOM_NODE,index); //在index前添加 pw.insertAfter(DOM_NODE,index); //在index后添加 pw.remove(index); //删除第index页面 pw.isStatic(); //是否静止状态 pw.destroy(); //销毁pageSwitch效果对象
事件
可以通过.on()
为pageSwitch对象绑定事件。
/* 事件绑定 * event可选值: * * before 页面切换前 * after 页面切换后 * update 页面切换中 * dragStart 开始拖拽 * dragMove 拖拽中 * dragEnd 结束拖拽 */ pw.on(event,callback);
应用举例
设置easing效果
pageSwitch插件支持内置的linear
、ease
、ease-in
、ease-out
、ease-in-out
、bounce
等easing动画效果。
//注:此处传值也可直接在new pageSwitch对象时经ease参数传入 //设置匀速linear过渡示例: pw.setEase('linear'); //由于内置了linear支持,所以可以直接使用 //假如没有内置linear,则使用自定义过渡曲线函数如下 pw.setEase(function(t,b,c,d){ return c*t/d + b; });
更多曲线函数参见:https://github.com/zhangxinxu/Tween/blob/master/tween.js
设置Transition过渡动画
pageSwitch插件支持的动画过渡效果有:
-
fade
:渐隐渐显。 -
slice
:裁切效果。 -
scroll
:页面滚动。 -
scroll3d
:3d页面滚动。 -
scrollCover
:页面视差滚入滚出(前后页面速度不一致)。 -
scrollCoverReverse
:同上反向。 -
scrollCoverIn
:总是下一张页面视差滚入。 -
scrollCoverOut
:总是当前页面视差滚出。 -
slide
:滑动切换,后者页面有缩放效果。 -
slideCover
:页面滑入滑出。 -
slideCoverReverse
:同上反向。 -
slideCoverIn
:总是下一张页面滑入。 -
slideCoverOut
:总是当前页面滑出。 -
flow
:封面滑动切换。 -
flowCover
:页面滑入滑出。 -
flowCoverReverse
:同上反向。 -
flowCoverIn
:总是下一张页面滑入。 -
flowCoverOut
:总是当前页面滑出。 -
zoom
:缩放切换。 -
zoomCover
:页面缩进缩出。 -
zoomCoverReverse
:同上反向。 -
zoomCoverIn
:总是下一张页面缩入。 -
zoomCoverOut
:总是当前页面缩出。 -
skew
:扭曲切换。 -
skewCover
:页面扭进扭出。 -
skewCoverReverse
:同上反向。 -
skewCoverIn
:总是下一张页面扭入。 -
skewCoverOut
:总是当前页面扭出。 -
flip
:翻转切换。 -
flip3d
:3d翻转切换。 -
flipClock
:翻页钟效果。 -
flipPaper
:翻书本效果。 -
flipCover
:页面翻入翻出。 -
flipCoverReverse
:同上反向。 -
flipCoverIn
:总是下一张页面翻入。 -
flipCoverOut
:总是当前页面翻出。 -
bomb
:放大切换。 -
bombCover
:页面大入大出。 -
bombCoverReverse
:同上反向。 -
bombCoverIn
:总是下一张页面大入。 -
bombCoverOut
:总是当前页面大出。
注意:除了fade
,所有效果都支持指定X或Y轴方向效果,只要在名字后面加上X或Y即可。 例如:scrollY
、flipX
、flipCoverX
、flipCoverInX
等类似。
//注:此处传值也可直接在new pageSwitch对象时经transition参数传入 //设置fade效果示例: pw.setTransition('fade'); //由于内置了fade效果,所以可以直接调用。 //假定没有内置fade,自定义转场函数如下 pw.setTransition(function(cpage,cp,tpage,tp){ /* 过渡效果处理函数 * @param HTMLElement cpage 参与动画的前序页面 * @param Float cp 目标页面过渡比率,取值范围-1到1 * @param HTMLElement tpage 参与动画的后序页面;如果非循环loop模式,则在切换到边缘页面时可能不存在该参数 * @param Float tp 目标页面过渡比率,取值范围-1到1;如果非循环loop模式,则在切换到边缘页面时可能不存在该参数 */ if('opacity' in cpage.style){ cpage.style.opacity=1-Math.abs(cp); if(tpage){ tpage.style.opacity=Math.abs(cp); } }else{ cpage.style.filter='alpha(opacity='+(1-Math.abs(cp))*100+')'; if(tpage){ tpage.style.filter='alpha(opacity='+Math.abs(cp)*100+')'; } } }); //如果你有jQuery类似组件,可以更简单 pw.setTransition(function(cpage,cp,tpage,tp){ $(cpage).css('opacity',1-Math.abs(cp)); $(tpage).css('opacity',Math.abs(cp)); });
jQuery/Zepto适配器
$.fn.extend({ pageSwitch:function(cfg){ this[0].ps=new pageSwitch(this[0],cfg); return this; }, ps:function(){ return this[0].ps; } }); //使用 $(container_id).pageSwitch({ duration:1000, transition:'slide' }); //由于链式调用返回依然是jq对象自身,所以如果需要使用pageSwitch对象方法, //需要通过 `.ps()` 方法获取对pageSwitch对象的引用。 $(container_id).ps().next();
pageSwitch页面切换插件的github地址为:https://github.com/qiqiboy/pageSwitch
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!