pageSwitch-支持121种过渡效果的JavaScript页面切换插件

简要教程

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

来源：jQuery之家