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

fade：基于透明度（opacity）為實現(xiàn)的漸顯漸隱效果

slice：基于尺寸（height、width）實現(xiàn)的裁切效果

scroll：基于位置（translate、top、left）實現(xiàn)的滾動效果

slide：基于位置（translate、top、left）實現(xiàn)的滑屏效果

flip：基于rotate變換實現(xiàn)的翻轉(zhuǎn)效果

flip3d：3d空間翻轉(zhuǎn)

flipPaper：翻書效果

flipClock：翻頁鐘效果

skew：基于skew變換實現(xiàn)的扭曲效果

zoom：基于scale變換實現(xiàn)的縮放效果

bomb：基于scale變換和透明度（opacity）實現(xiàn)的爆炸效果

// 首先在頁面中引入pageSwitch.js
// 調(diào)用 pageSwitch 方法

var pw=new pageSwitch('container id',{
    duration:600,           //int 頁面過渡時間
    direction:1,            //int 頁面切換方向，0橫向，1縱向
    start:0,                //int 默認(rèn)顯示頁面
    loop:false,             //bool 是否循環(huán)切換
    ease:'ease',            //string|function 過渡曲線動畫，詳見下方說明
    transition:'slide',     //string|function轉(zhuǎn)場方式，詳見下方說明
    mousewheel:false,       //bool 是否啟用鼠標(biāo)滾輪切換
    arrowkey:false,         //bool 是否啟用鍵盤方向切換
    autoplay:false,         //bool 是否自動播放幻燈 新增
    interval:int            //bool 幻燈播放時間間隔 新增
});

//調(diào)用方法
pw.prev();                  //上一張
pw.next();                  //下一張
pw.slide(n);                //第n張
pw.setEase();               //重新設(shè)定過渡曲線
pw.setTransition();         //重新設(shè)定轉(zhuǎn)場方式
pw.freeze(true|false);      //凍結(jié)頁面轉(zhuǎn)換，凍結(jié)后不可響應(yīng)用戶操作（調(diào)用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 結(jié)束拖拽
 */
pw.on(event,callback);
setEase 示例

內(nèi)置支持 linear ease ease-in ease-out ease-in-out bounce等
bounce 彈跳過渡，很有意思，可以試試

//注：此處傳值也可直接在new pageSwitch對象時經(jīng)ease參數(shù)傳入
//設(shè)置勻速linear過渡示例：
pw.setEase('linear'); //由于內(nèi)置了linear支持，所以可以直接使用

//假如沒有內(nèi)置linear，則使用自定義過渡曲線函數(shù)如下
pw.setEase(function(t,b,c,d){
    return c*t/d + b;
});
更多曲線函數(shù)參見：https://github.com/zhangxinxu/Tween/blob/master/tween.js

setTransition 示例

支持以下轉(zhuǎn)場效果：

fade 漸隱漸顯

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

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

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

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

flip 翻轉(zhuǎn)切換
flipCover 頁面翻入翻出
flipCoverIn 總是下一張頁面翻入
flipCoverOut 總是當(dāng)前頁面翻出

bomb 放大切換
bombCover 頁面大入大出
bombCoverIn 總是下一張頁面大入
bombCoverOut 總是當(dāng)前頁面大出

注意：除了fade，所有效果都支持指定X或Y軸方向效果，只要在名字后面加上X或Y即可。 例如：scrollY flipX flipCoverX flipCoverInX 等類似。

//注：此處傳值也可直接在new pageSwitch對象時經(jīng)transition參數(shù)傳入
//設(shè)置fade效果示例：
pw.setTransition('fade'); //由于內(nèi)置了fade效果，所以可以直接調(diào)用。

//假定沒有內(nèi)置fade，自定義轉(zhuǎn)場函數(shù)如下
pw.setTransition(function(cpage,cp,tpage,tp){
    /* 過渡效果處理函數(shù)
     *
     * @param Element cpage 當(dāng)前頁面
     * @param Float cp      當(dāng)前頁面過度百分比。cp<0說明向上切換，反之向下
     * @param Element tpage 前序頁面
     * @param Float tp      前序頁面過度百分比 。tp<0說明向下切換，反之向上
     * 注意：后兩個參數(shù) 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+')';
        }
    }
});
 

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

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

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

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

　　兼容全平臺，包括IE6+

 //這里以定義一個fade動畫樣式來舉例  
pageSwitch.addTransition('fade',function(cpage,cp,tpage,tp){  
    /*
     * @param HTMLElement cpage 參與動畫的前序頁面  
     * @param Float cp 目標(biāo)頁面過渡比率，取值范圍-1到1  
     * @param HTMLElement tpage 參與動畫的后序頁面；如果非循環(huán)loop模式，則在切換到邊緣頁面時可能不存在該參數(shù)  
     * @param Float tp 目標(biāo)頁面過渡比率，取值范圍-1到1；如果非循環(huán)loop模式，則在切換到邊緣頁面時可能不存在該參數(shù)  
     */ 
   
    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