移動互聯網的火熱發展，帶來了很多產品推廣傳播的html5頁面開發需求，而這類頁面又往往以單頁面滾屏（onepage-scroll）類型居多。基于業務上的需要，誕生了pageSwitch.js插件，支持多達106種切頁效果，更可支持自定義切頁動畫， 盡情發揮想象力！

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.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轉場方式，詳見下方說明
    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.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 漸隱漸顯

scroll 頁面滾動
scrollCover 頁面視差滾入滾出（前后頁面速度不一致）
scrollCoverIn 總是下一張頁面視差滾入
scrollCoverOut 總是當前頁面視差滾出

slide 滑動切換，后者頁面有縮放效果
slideCover 頁面滑入滑出
slideCoverIn 總是下一張頁面滑入
slideCoverOut 總是當前頁面滑出

zoom 縮放切換
zoomCover 頁面縮進縮出
zoomCoverIn 總是下一張頁面縮入
zoomCoverOut 總是當前頁面縮出

skew 扭曲切換
skewCover 頁面扭進扭出
skewCoverIn 總是下一張頁面扭入
skewCoverOut 總是當前頁面扭出

flip 翻轉切換
flipCover 頁面翻入翻出
flipCoverIn 總是下一張頁面翻入
flipCoverOut 總是當前頁面翻出

bomb 放大切換
bombCover 頁面大入大出
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 Element cpage 當前頁面
     * @param Float cp      當前頁面過度百分比。cp<0說明向上切換，反之向下
     * @param Element tpage 前序頁面
     * @param Float tp      前序頁面過度百分比 。tp<0說明向下切換，反之向上
     * 注意：后兩個參數 tpage和tp可能為空（頁面切換邊緣時，第一張、最后一張的情況）
     */

    if('opacity' in cpage.style){
        cpage.style.opacity=Math.abs(tp);
        if(tpage){
            tpage.style.opacity=Math.abs(cp);
        }
    }else{
        cpage.style.filter='alpha(opacity='+(Math.abs(tp))*100+')';
        if(tpage){
            tpage.style.filter='alpha(opacity='+Math.abs(cp)*100+')';
        }
    }
});
 

　　沒有完美的東西，我自己對這個組件也有一些看法，并不是推薦大家說這個東西適用任何情況。

　　優點：組件定義了外部操作框架，可以很方面的實現自己需要的動畫效果，并且內置了許多的效果，適用起來簡單方便。

　　缺點：由于為了動畫定義邏輯的簡單，動畫部分沒有使用css3的transition。與原生transition動畫相比，雖然已經使用了requestAnimationFrame，但是由于部分基于簡化操作的原因，性能損耗是不可避免的。但是這只是在老機型上的表現，在終端性能越來強大的今天，這部分性能損耗基本可以忽略。

　　綜上，我個人建議，如果你的頁面不是大多跑到三四年前那種iphone4 android2.2等老機器上的，大可放心使用pageSwitch。

　　兼容全平臺，包括IE6+

 //這里以定義一個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));  
}); 
 

pageSwitch.js