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插件支持内置的lineareaseease-inease-outease-in-outbounce等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即可。 例如:scrollYflipXflipCoverXflipCoverInX等类似。

//注:此处传值也可直接在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