turn.js （翻頁效果）總結

Turn.js是一個內置的jQuery翻頁插件

1 html中引入<script type="text/javascript" src="js/turn.js"></script>

2  創建html

<div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard"></div> <div> Page 1 </div> <div> Page 2 </div> <div> Page 3 </div> <div> Page 4 </div> <div class="hard"></div> <div class="hard"></div> </div>

3 javascript 部分

$("#flipbook").turn({
  width: 400, height: 300, autoCenter: true });

4.可用選項、屬性、方法、事件、css類

　選項：

(1)acceleration:設置硬件加速模式，對於觸摸設備，此值必須為真。
 acceleration:true;
(2)direction:指定flipbook從左到右(DIR=ltr，默認值)或右向左(DIR=rtl)的方向。
　　a.$("#flipbook").turn({
　　　　direction:'rtl'
　　　})
　　b.<div id="flipbook" dir="rtl"></div>
　　c.#flipbook{
　　  　　direction:rtl
  　　}
(3)duration:設置翻頁的速度 
　　duration:600 如果設置為0 則不會產生翻頁效(4) gradients：翻頁過程中顯示漸變和陰影

　　 gradients:true
(5) width:頁面的寬度 height:頁面的高度
 width:num height:num
(6) elevation：轉換期間頁面的高度
 elevation:0
(7) page：初始化時設置頁面個數
　　 page:1
(8) pages:設置任意數量的頁面。如果頁面的數量大於#flipbook中元素的數量，使用addPage方法動態地添加這些頁面。
 $("#flipbook").children().length()
(9) when:事件偵聽器。鍵必須在事件列表中使用
 $("#flipbook").turn({
　　　　when:{
　　　　　　turned: function(e, page) {
　　　　　　　　if(page==1){
　　　　　　　　}
　　　　　　　　if(page==2){
　　　　　　　　}
　　　　　　}
　　　　}
　　})
屬性：
(1) animating:當折疊的頁面顯示時返回true，

　　function isAnimating() { 　　if ($("#flipbook").turn("animating")) { 　　alert('Animating a page!'); 　　} 　　}
 (2)direction: 返回當前翻頁的方向
 $("#flipbook).turn("direction")
 (3)display：獲取當前顯示的是單頁還是雙頁
 $("#flipbook).turn("display")
 (4)page:獲取當前頁面為第幾頁
 $("#flipbook).turn("page")
 (5)pages:獲取總共有多少頁
 $("#flipbook").turn("pages")
 (6)size：獲取flipbook的高寬
 $("#flipbook").turn("size") 獲取出有兩個值 size.width 和 size.height
 方法:
 (1) addpage:將頁面添加到flipbook中 
 例如插入第10頁:
 element=$("<div />").html("loading");
　　　$("#flipbook").turn("addpagge",element,10)
 (2) destroy：刪除所有頁面
 $("#flipbook").turn("destroy").remove();
 (3) direction :設置flipbook 的方向
 $("#flipbook").turn("direciton","rtl")
 (4) display：設置單頁還是雙頁
 $("#flipbook").turn("display","single") 
 (5) next 把視圖轉到下一個
 $("#flipbook").turn("next")
 $("#flipbook").turn("next").turn("next")
 (6) options:更改選項的值 
 $("#flipbook").turn("options",{display:"single",duration:})
 (7) page：跳到指定的頁面
 $("#fllipbook").turn("page",10)
 (8) previous:轉到前面的視圖
 　 $("#flipbook").turn("previous")
 (9) removepage：刪除指定的頁面
 $("#flipbook").turn("removepage"，10)
 (10) resize:重新計算頁面的大小
 $("flipbook").turn("resize")
 (11) stop:停止當前的過渡
 $("#flipbook").turn("page",10).turn("stop")
 (12)version:獲取當前發布的版本
　　　$("#flipbook").turn("version")
 (13)zoom:flipbook的縮放比例 
　　　 $("#flipbook").turn("zoom",0.5) 例如當值為0.5時 縮小為原來的一半 當值為1時 則不改變大小
 事件：
 (1) end：事件在頁面停止時觸發
 $("#flipbook").bind("end",function(event,pageobject,turned){
　　　　　　alert("turn.end:"+pageobject.page)
 })
　　(2)first：當當前頁面為1時觸發此事件
 $("#flipbook").bind("first",function(event){
 　　alert("page1")
 })
 (3)last：當當前頁面為最后一頁時觸發此事件
 $("#flipbook").bind("last",function(event){
　　　　 alert("page_last")
　　 })
 (4)missing：當當前范圍需要某些頁面時 觸發此事件
 　　　$("#flipbook").bind("missing",function(event,pages){
　　　　　　for(var i=0;i<pages.length;i++){
　　　　　　　　$(this).turn("addpage",$("<div/>"),pages[i])
　　　　　　}
 })
 (10) addpage：將頁面插入到flipbook
　　　　　 element=$("<div/>").html("loading...")
 $("#flipbook").turn("addpage",element,10) 插入第10頁
 (11) start：頁面啟動時觸發
 $("#flipbook").bind("start",function(event,pageobject,corner){
　　　　　　　　if(corner=="tl"||corner=="tr"){
　　　　　　　　　　　event.preventDefault();　　　
　　　　　　　　}
 })
 當翻動左角和右角時，禁止啟動動畫
 (12)turning：翻頁之前被啟動
　　　　　$("#flipbook").bind("turning",function(event,page,view){
 alert("turning the page to"+page)
 })
 翻頁之前 彈出即將翻開的是第幾頁
 (13)turned：翻頁完成之后啟動
 $("#flipbook").bind("turned",function(event,page,view){
　　　　　　alert("page"+page)
 })
 (14)zooming:當縮放改變時觸發此事件

　　　　　　$("#flipbook").bind("zooming", function(event, newZoomValue, currentZoomValue) { 　　　　　　　　alert("New zoom: "+currentZoomValue); 　　　　　　});