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)的方向。
一、

$("#flipbook").turn({direction:'rtl' })

二、

<div id="flipbook" dir="rtl"></div>`

三、

#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:事件偵聽器。鍵必須在事件列表中使用
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#?flipbook").turn…("#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的高寬
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#?flipbook").turn…("

").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:停止當前的過渡
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#?flipbook").turn…("#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：當當前范圍需要某些頁面時 觸發此事件

KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#?flipbook").bind…(this).turn(“addpage”,KaTeX parse error: Expected 'EOF', got '}' at position 28: …ages[i]) 　　　　　　}? }) …("

").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); });

總結

以上是生活随笔為你收集整理的turn.js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。