pageSwitch-支持121種過渡效果的JavaScript頁面切換插件
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效果對象</pre>
事件
可以通過.on()為pageSwitch對象綁定事件。
/* 事件綁定
- event可選值:
- before 頁面切換前
- after 頁面切換后
- update 頁面切換中
- dragStart 開始拖拽
- dragMove 拖拽中
dragEnd 結束拖拽 */ pw.on(event,callback);</pre>
應用舉例
設置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; });</pre>
更多曲線函數參見： 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));
});</pre>
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();</pre>
pageSwitch頁面切換插件的github地址為： https://github.com/qiqiboy/pageSwitch
來自： http://www.html5cn.org/article-9292-1.html
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！