turn.js中文API 寫一個翻頁效果的參數詳細解釋

$('.flipbook').turn(
    width: 922, 
    height: 600, 
    elevation: 50, 
    gradients: true, 
    autoCenter: true 
});

turn.js中文API動畫

參數 描述 默認值

Options選項

acceleration 加速模式ture or false。(必須在移動端) true
autoCenter 中心翻取決於有多少頁面可見 true or false false
direction 翻頁方向 $("#flipbook").turn({direction: "rtl"}); ltr翻從左到右
display 顯示模式(只顯示一頁single,兩個頁面double) double
duration 持續時間,單位毫秒。若是你設置爲0,不會有過渡效果 600
gradients 顯示漸變陰影 true
height 翻頁的高度 $("flipbook").height()
pages 設置頁面的數量 $("#flipbook").children().length
turnCorners 設置角落的值bl,br or tl,tr or bl,tr 例如:var way = 1; setInterval(function() { if (way==1) { $("#flipbook").turn("next"); if ($("#flipbook").turn("page")== $("#flipbook").turn("pages")) { way = 2; $("#flipbook").turn("options", {turnCorners: "tl,tr"}); } } else { $("#flipbook").turn("previous"); if ($("#flipbook").turn("page")==1) { way = 1; $("#flipbook").turn("options", {turnCorners: "bl,br"}); } } }, 1000); bl,br
when 監聽事件 when 當,例如:$("#flipbook").turn({when: { turning: function(event, page, pageObject) { // Implementation } } }); -

屬性Properties

animating 若頁面動畫返回true時,例如:<pre>function isAnimating() { if ($(&quot;#flipbook&quot;).turn(&quot;animating&quot;)) { alert('Animating a page!'); } }</pre> -
direction 返回當前翻頁的方向:$(&quot;#flipbook&quot;).turn(&quot;direction&quot;); -
disable 啓用或禁用翻頁效果:$(&quot;#flipbook&quot;).turn(&quot;disable&quot;, true);
相關文章
相關標籤/搜索