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

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

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

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

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

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

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

flipPaper：翻書效果

flipClock：翻頁鐘效果

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

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

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

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

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

//調(diào)用方法
pw.prev();                  //上一張
pw.next();                  //下一張
pw.slide(n);                //第n張
pw.setEase();               //重新設(shè)定過渡曲線
pw.setTransition();         //重新設(shè)定轉(zhuǎn)場(chǎng)方式
pw.freeze(true|false);      //凍結(jié)頁面轉(zhuǎn)換，凍結(jié)后不可響應(yīng)用戶操作（調(diào)用slide prev next方法還可以進(jìn)行）

pw.play();                  //播放幻燈
pw.pause();                 //暫?；脽?/span>

/* 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效果對(duì)象

/* 事件綁定
 * 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對(duì)象時(shí)經(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)場(chǎng)效果：

fade 漸隱漸顯

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

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

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

skew 扭曲切換
skewCover 頁面扭進(jìn)扭出
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對(duì)象時(shí)經(jīng)transition參數(shù)傳入
//設(shè)置fade效果示例：
pw.setTransition('fade'); //由于內(nèi)置了fade效果，所以可以直接調(diào)用。

//假定沒有內(nèi)置fade，自定義轉(zhuǎn)場(chǎng)函數(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說明向下切換，反之向上
     * 注意：后兩個(gè)參數(shù) tpage和tp可能為空（頁面切換邊緣時(shí)，第一張、最后一張的情況）
     */

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

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

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

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

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

　　兼容全平臺(tái)，包括IE6+

 //這里以定義一個(gè)fade動(dòng)畫樣式來舉例  
pageSwitch.addTransition('fade',function(cpage,cp,tpage,tp){  
    /*
     * @param HTMLElement cpage 參與動(dòng)畫的前序頁面  
     * @param Float cp 目標(biāo)頁面過渡比率，取值范圍-1到1  
     * @param HTMLElement tpage 參與動(dòng)畫的后序頁面；如果非循環(huán)loop模式，則在切換到邊緣頁面時(shí)可能不存在該參數(shù)  
     * @param Float tp 目標(biāo)頁面過渡比率，取值范圍-1到1；如果非循環(huán)loop模式，則在切換到邊緣頁面時(shí)可能不存在該參數(shù)  
     */ 
   
    if('opacity' in cpage.style){   //檢測(cè)透明度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類似組件，可以更簡(jiǎn)單  
pageSwitch.addTransition('fade',function(cpage,cp,tpage,tp){  
    $(cpage).css('opacity',1-Math.abs(cp));  
    $(tpage).css('opacity',Math.abs(cp));  
}); 
 

pageSwitch.js