turn.js中文api
廣告：
turn.js （翻頁(yè)效果）總結(jié)
Turn.js是一個(gè)內(nèi)置的jQuery翻頁(yè)插件
1 html中引入<script type="text/javascript" src="js/turn.js"></script>
2 創(chuàng)建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.可用選項(xiàng)、屬性、方法、事件、css類
選項(xiàng)：
(1)acceleration:設(shè)置硬件加速模式，對(duì)于觸摸設(shè)備，此值必須為真。
acceleration:true;
(2)direction:指定flipbook從左到右(DIR=ltr，默認(rèn)值)或右向左(DIR=rtl)的方向。
a.$("#flipbook").turn({
direction:'rtl'
})
b.<div id="flipbook" dir="rtl"></div>
c.#flipbook{
direction:rtl
}
(3)duration:設(shè)置翻頁(yè)的速度
duration:600 如果設(shè)置為0 則不會(huì)產(chǎn)生翻頁(yè)效(4) gradients：翻頁(yè)過(guò)程中顯示漸變和陰影
gradients:true
(5) width:頁(yè)面的寬度 height:頁(yè)面的高度
width:num height:num
(6) elevation：轉(zhuǎn)換期間頁(yè)面的高度
elevation:0
(7) page：初始化時(shí)設(shè)置頁(yè)面?zhèn)�數(shù)
page:1
(8) pages:設(shè)置任意數(shù)量的頁(yè)面。如果頁(yè)面的數(shù)量大于#flipbook中元素的數(shù)量，使用addPage方法動(dòng)態(tài)地添加這些頁(yè)面。
$("#flipbook").children().length()
(9) when:事件偵聽(tīng)器。鍵必須在事件列表中使用
$("#flipbook").turn({
when:{
turned: function(e, page) {
if(page==1){
}
if(page==2){
}
}
}
})
屬性：
(1) animating:當(dāng)折疊的頁(yè)面顯示時(shí)返回true，
function isAnimating() {
if ($("#flipbook").turn("animating")) {
alert('Animating a page!');
}
}
(2)direction: 返回當(dāng)前翻頁(yè)的方向
$("#flipbook).turn("direction")
(3)display：獲取當(dāng)前顯示的是單頁(yè)還是雙頁(yè)
$("#flipbook).turn("display")
(4)page:獲取當(dāng)前頁(yè)面為第幾頁(yè)
$("#flipbook).turn("page")
(5)pages:獲取總共有多少頁(yè)
$("#flipbook").turn("pages")
(6)size：獲取flipbook的高寬
$("#flipbook").turn("size") 獲取出有兩個(gè)值 size.width 和 size.height
方法:
(1) addpage:將頁(yè)面添加到flipbook中
例如插入第10頁(yè):
element=$("<div />").html("loading");
$("#flipbook").turn("addpagge",element,10)
(2) destroy：刪除所有頁(yè)面
$("#flipbook").turn("destroy").remove();
(3) direction :設(shè)置flipbook 的方向
$("#flipbook").turn("direciton","rtl")
(4) display：設(shè)置單頁(yè)還是雙頁(yè)
$("#flipbook").turn("display","single")
(5) next 把視圖轉(zhuǎn)到下一個(gè)
$("#flipbook").turn("next")
$("#flipbook").turn("next").turn("next")
(6) options:更改選項(xiàng)的值
$("#flipbook").turn("options",{display:"single",duration:})
(7) page：跳到指定的頁(yè)面
$("#fllipbook").turn("page",10)
(8) previous:轉(zhuǎn)到前面的視圖
$("#flipbook").turn("previous")
(9) removepage：刪除指定的頁(yè)面
$("#flipbook").turn("removepage"，10)
(10) resize:重新計(jì)算頁(yè)面的大小
$("flipbook").turn("resize")
(11) stop:停止當(dāng)前的過(guò)渡
$("#flipbook").turn("page",10).turn("stop")
(12)version:獲取當(dāng)前發(fā)布的版本
$("#flipbook").turn("version")
(13)zoom:flipbook的縮放比例
$("#flipbook").turn("zoom",0.5) 例如當(dāng)值為0.5時(shí) 縮小為原來(lái)的一半 當(dāng)值為1時(shí) 則不改變大小
事件：
(1) end：事件在頁(yè)面停止時(shí)觸發(fā)
$("#flipbook").bind("end",function(event,pageobject,turned){
alert("turn.end:"+pageobject.page)
})
(2)first：當(dāng)當(dāng)前頁(yè)面為1時(shí)觸發(fā)此事件
$("#flipbook").bind("first",function(event){
alert("page1")
})
(3)last：當(dāng)當(dāng)前頁(yè)面為最后一頁(yè)時(shí)觸發(fā)此事件
$("#flipbook").bind("last",function(event){
alert("page_last")
})
(4)missing：當(dāng)當(dāng)前范圍需要某些頁(yè)面時(shí) 觸發(fā)此事件
$("#flipbook").bind("missing",function(event,pages){
for(var i=0;i<pages.length;i++){
$(this).turn("addpage",$("<div/>"),pages[i])
}
})
(10) addpage：將頁(yè)面插入到flipbook
element=$("<div/>").html("loading...")
$("#flipbook").turn("addpage",element,10) 插入第10頁(yè)
(11) start：頁(yè)面啟動(dòng)時(shí)觸發(fā)
$("#flipbook").bind("start",function(event,pageobject,corner){
if(corner=="tl"||corner=="tr"){
event.preventDefault();
}
})
當(dāng)翻動(dòng)左角和右角時(shí)，禁止啟動(dòng)動(dòng)畫(huà)
(12)turning：翻頁(yè)之前被啟動(dòng)
$("#flipbook").bind("turning",function(event,page,view){
alert("turning the page to"+page)
})
翻頁(yè)之前 彈出即將翻開(kāi)的是第幾頁(yè)
(13)turned：翻頁(yè)完成之后啟動(dòng)
$("#flipbook").bind("turned",function(event,page,view){
alert("page"+page)
})
(14)zooming:當(dāng)縮放改變時(shí)觸發(fā)此事件
$("#flipbook").bind("zooming", function(event, newZoomValue, currentZoomValue) {
alert("New zoom: "+currentZoomValue);
});
廣告：
