turn.js (翻頁效果)總結
阿新 • • 發佈:2018-01-10
play blog spa == 多少 硬件加速 rip key num
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")
turn.js (翻頁效果)總結