pageSwitch.js 实现全屏切换

移动互联网的火热发展，带来了很多产品推广传播的html5页面开发需求，而这类页面又往往以单页面滚屏（onepage-scroll）类型居多。qiqiboy开发的这个专门处理该类需求的javascript组件 – pageSwitch.js。

专门处理页面上幻灯、走马灯效果的组件 – Touchslider.js，支持上下左右四个方向的滚屏切换，其实它也能胜任部分这类单页滚屏操作。但是由于实现原理限制，他也只能实现了连续滚屏的效果。而在移动端上，页面不仅仅是滚动（scroll）切换，还会有各种切换转场方式，例如放大缩小，飞进飞出，翻来翻去等等……而这些效果，就是pageSwitch专注的事了。

补充一下，Touchslider和pageSwitch的不同：前者专注于滚动操作，且不限于全屏滚动（即可视容器窗口中同时可见页面数量可以不固定，具体可以参见此处例子）；后者则是专注于全屏页面的切换操作，切换效果可以五花八门，参见此例。

内置支持的切换效果

pageSwitch.js现在已经内置支持 106 中切换效果，其实可以支持更多，只是考虑到文件体积，不想加入太多不常用的效果。pageSwitch支持自定义切换效果，可以根据示例自行定义自己需要的效果，这个如果定义后边会讲到。

现在内置支持的效果主要分为以下几个大类：

• fade：基于透明度（opacity）为实现的渐显渐隐效果，例子
• slice：基于尺寸（height、width）实现的裁切效果，例子
• scroll：基于位置（translate、top、left）实现的滚动效果，例子
• slide：基于位置（translate、top、left）实现的滑屏效果，例子
• flip：基于rotate变换实现的翻转效果，例子
  • flip3d：3d空间翻转，例子
  • flipPaper：翻书效果，例子
  • flipClock：翻页钟效果，例子
• skew：基于skew变换实现的扭曲效果，例子
• zoom：基于scale变换实现的缩放效果，例子
• bomb：基于scale变换和透明度（opacity）实现的爆炸效果，例子

基于以上几类效果，派生出了许多微小变化的效果，共同组成了pageSwitch内置支持的效果。

如何自定义效果

除了以上组件内置支持的效果，更可以自定义自己需要的效果。自定义效果前，需要明确pageSwitch的切屏理念：

非动画阶段只有一个页面可以被看到（全屏页面的概念）；动画阶段最多只有两个页面参与，即一前一后，他们分别有自己对应的进度比率，基于该比率定义页面样式以实现连续的动画。

自定义动画效果即通过定义一个函数用来处理页面样式：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

//这里以定义一个fade动画样式来举例 pageSwitch.addTransition('fade',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){ //检测透明度css支持 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类似组件，可以更简单 pageSwitch.addTransition('fade',function(cpage,cp,tpage,tp){ $(cpage).css('opacity',1-Math.abs(cp)); $(tpage).css('opacity',Math.abs(cp)); });

以上是自定义动画的一个简单例子，复杂的例子可以参见组件内置的 flipClock flipPaper等效果。

优缺点自谈

没有完美的东西，我自己对这个组件也有一些看法，并不是推荐大家说这个东西适用任何情况。

优点：组件定义了外部操作框架，可以很方面的实现自己需要的动画效果，并且内置了许多的效果，适用起来简单方便。

缺点：由于为了动画定义逻辑的简单，动画部分没有使用css3的transition。与原生transition动画相比，虽然已经使用了requestAnimationFrame，但是由于部分基于简化操作的原因，性能损耗是不可避免的。但是这只是在老机型上的表现，在终端性能越来强大的今天，这部分性能损耗基本可以忽略。

综上，个人建议，如果你的页面不是大多跑到三四年前那种iphone4 android2.2等老机器上的，大可放心使用pageSwitch。

Github & Demo

pageSwitch.js

pageSwitch

与 TouchSlider.js 的区别
pageSwitch.js适用场景为全屏切换，即一切一屏，并且在此基础上实现了超过一百种切换效果。而TouchSlider.js则侧重于在滑动效果下，不仅支持全屏切换，还支持不固定尺寸的幻灯切换。
具体使用请参看各组件所提供的示例。

Just a page Switch Javascript Library, and it has supported 121 switching animations.

页面切换器，支持多达121种切页效果，更可支持自定义切页动画， 尽情发挥想象力！

http://u.boy.im/pageswitch/pic.html

手机扫描下面二维码查看例子：

预览效果

  

      如何使用

// 首先在页面中引入pageSwitch.js
// 调用 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 幻灯播放时间间隔 新增
});

//调用方法
pw.prev();                  //上一张
pw.next();                  //下一张
pw.slide(n);                //第n张
pw.setEase();               //重新设定过渡曲线
pw.setTransition();         //重新设定转场方式
pw.freeze(true|false);      //冻结页面转换，冻结后不可响应用户操作（调用slide prev next方法还可以进行）

pw.play();                  //播放幻灯
pw.pause();                 //暂停幻灯

/* 2015.03.22 新增方法 */
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效果对象

/* 事件绑定
 * event可选值:
 * 
 * before 页面切换前
 * after 页面切换后
 * update 页面切换中
 * dragStart 开始拖拽
 * dragMove 拖拽中
 * dragEnd 结束拖拽
 */
pw.on(event,callback);

     setEase 示例

内置支持 linear ease ease-in ease-out ease-in-out bounce等
bounce 弹跳过渡，很有意思，可以试试

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

     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.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'
});

$(container_id).ps().next(); //由于链式调用返回依然是jq对象自身，所以如果需要使用pageSwitch对象方法，需要通过 `.ps()` 方法获取对pageSwitch对象的引用。

兼容性

兼容全平台，包括IE6+