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 （翻頁效果）總結