pageSwitch-支持121种过渡效果的JavaScript页面切换插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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