翻書插件：bookblock.js

BookBlock 是一個 jQuery插件，用來製做帶有翻頁效果的小書冊。
能夠用任何形式的內容，好比圖像或文本。
插件會在翻頁時利用變形模擬手工翻頁，併產生重疊的陰影以達到更逼真的效果。

基本頁面

 1 <div id="bb-bookblock" class="bb-bookblock">
 2     <!-- 左右翻頁按鈕 -->
 3     <div class="bb-nav-prev" id="bb-nav-prev"></div>
 4     <div class="bb-nav-next" id="bb-nav-next"></div>
 5     <div class="bb-item">
 6         <!-- 頁面內容 -->
 7     </div>
 8     <div class="bb-item">
 9         <!-- 頁面內容 -->
10     </div>
11     <div class="bb-item">
12         <!-- 頁面內容 -->
13     </div>
14     <div class="bb-item">
15         <!-- 頁面內容 -->
16     </div>
17 </div>

基本頁面結構

默認參數

// 豎直翻頁：vertical 或 水平翻頁：horizontal
orientation : 'horizontal',

// 翻頁方向
// 從左向右：ltr 或 從右向左：rtl
direction : 'ltr',

// 翻頁的速度 ms.
speed: 1000,

//翻頁的緩動效果.
easing: 'ease-in-out',

//若是設置爲true，那麼正在翻轉的頁面和兩邊都會有一層陰影
shadows: true,

// 兩邊的陰影的透明度（當翻轉頁面覆蓋到上面的時候）[0.1 - 1]
shadowSides: 0.2,

// 正在翻轉的圖片上的陰影的透明度 [0.1 - 1]
shadowFlip: 0.1,

//透視值
perspective: 1300,

// 是否當達到最後一項的時候顯示第一項（循環）
circular: false,

//是否指定一個選擇器用來觸發 netx() 函數。 好比："#bb-nav-next".
nextEl: '',

// 是否指定一個選擇器用來觸發 prev() 函數。
prevEl: '',

// 自動播放：若是設置爲 ture ，那麼將會覆蓋 circular 參數值
autoplay: false,

// 當設置爲自動播放的時候，兩個項之間的切換時間間隔 ms
interval: 3000,

// 翻頁後的回調函數
// page：當前項的索引
// isLimit ：若是當前項是最後一項或者是第一項就爲 true
onEndFlip: function(page, isLimit) {
return false;
},

// 翻頁前的回調函數
// page：當前項的索引
onBeforeFlip: function(page) {
return false;
}

動態加頁

　　當一次加載大量頁面時就會出現卡頓，並且一個文件中放置大量內容也不易管理，因此動態加載是很必要的。
　　我將每一個頁面中的內容分別放置在一個單獨的html文件中，再在使用時根據翻到的頁面經過ajax去請求內容，從而作到看多少，加多少。
　　下面的代碼是我根據本身工做須要作的，可供參考。

  1 /************************ 動態讀取頁面內容 ************************/
  2 /**
  3  * 採用Ajax方法獲取頁面內容
  4  * author:huliang;
  5  * date:2017/1/11
  6  */
  7 // 翻頁插件的配置
  8 var config = '';
  9 // 翻頁插件中，要顯示的頁（主要用於首次進入時）
 10 var currentIndex = 0;
 11 // 判斷當前狀態是否能夠執行翻頁操做
 12 var handleFlag = true;
 13 // 兩次翻書的間隔時間，防止快速翻頁出現BUG
 14 var timeOut = 1200;
 15 // 設置向前、向後翻頁的標誌
 16 var ftn = '';
 17 /**
 18  * 用於表示在加載content文件夾下的html的規則
 19  * loadType = 1 ，逐個加載頁面
 20  * loadType = 2 ，只加載奇數頁
 21  * @type {Number}
 22  */
 23 var loadType = 2;
 24 // 當前顯示的頁號
 25 var currentPage = 1;
 26 // 書本中頁面的總數量（總數量+2）
 27 var maxPage = 130;
 28 
 29 //翻書效果
 30 function Page() {
 31     config = {
 32         $bookBlock: $('#bb-bookblock'),
 33         $navNext: $('#bb-nav-next'),
 34         $navPrev: $('#bb-nav-prev'),
 35         bb: $('#bb-bookblock').bookblock({
 36             speed: 800,
 37             shadowSides: 0.8,
 38             shadowFlip: 0.7,
 39             onEndFlip: function(page, isLimit) {
 40                 return false;
 41             }
 42         })
 43     };
 44 }
 45 // 當檢測到向前翻頁的事件時執行
 46 function whenClickPrevBtn() {
 47     // 根據handleFlag的處理狀況，判斷是否響應這次操做
 48     if (handleFlag) {
 49         handleFlag = false;
 50         // timeOut毫秒內，不重複響應其它操做
 51         setTimeout(function() {handleFlag = true;}, timeOut);
 52 
 53         // 判斷是不是第一頁
 54         if (currentPage == loadType + 1) {
 55             commonNotice("已到第一頁！");
 56             return;
 57         }
 58         ftn = "prePage";
 59         console.log("do prePage");
 60         prePage2();
 61     }
 62 }
 63 // 當檢測到向後翻頁的事件時執行
 64 function whenClickNextBtn() {
 65     // 根據handleFlag的處理狀況，判斷是否響應這次操做
 66     if (handleFlag) {
 67         handleFlag = false;
 68         // timeOut毫秒內，不重複響應其它操做
 69         setTimeout(function() {handleFlag = true;}, timeOut);
 70 
 71         // 判斷是不是最後一頁
 72         if (maxPage - currentPage < 2) {
 73             commonNotice("已到最後一頁！");
 74             return;
 75         }
 76         ftn = "nextPage";
 77         console.log("do nextPage");
 78         nextPage2();
 79     }
 80 }
 81 
 82 /* 獲取頁面連接上的hash，用於斷定當前的頁面的值 */
 83 function loadCurPageByHash() {
 84     var search = window.location.search;
 85     if(search.length){
 86         var _array = search.split("=");
 87         currentPage = Number(_array[_array.length - 1]);
 88     }
 89 }
 90 
 91 /**
 92  * 判斷頁面是否已被加載
 93  * @param  {[type]}  currentPage [當前頁]
 94  * @return {Boolean}
 95  */
 96 function isPageLoaded(currentPage) {
 97     var id = "div_1.1_" + currentPage;
 98     var html = document.getElementById(id);
 99     return $(html).length ? true : false;
100 }
101 
102 /* 向 右→ 翻頁 */
103 function prePage2() {
104     currentPage = currentPage - loadType*2;
105     if(isPageLoaded(currentPage)){
106         // 頁面已加載，從新設置currentPage
107         currentPage = Number(currentPage + loadType);
108         config.bb.prev();
109         currentIndex--;
110         return;
111     }else{
112         // 加載新頁面
113         doLoadPage(currentPage);
114     }
115 }
116 /* 向 ←左 翻頁 */
117 function nextPage2() {
118     if(isPageLoaded(currentPage)){
119         // 頁面已加載，從新設置currentPage
120         currentPage = Number(currentPage + loadType);
121         config.bb.next();
122         currentIndex++;
123         return;
124     }else{
125         // 加載新頁面
126         doLoadPage(currentPage);
127     }
128 }
129 
130 /**
131  * 經過Ajax請求頁面內容
132  * @param  {[type]} currentPage [當前頁]
133  */
134 function doLoadPage(currentPage) {
135   var fileName = "content/1.1_" + currentPage + ".html";
136   $.ajax({
137     url: fileName,
138     type: "GET",
139     async: true,
140     success: function(data) {
141         editContent(data);
142     }
143   });
144 }
145 /**
146  * 根據頁面內容，拼接bb-item，最後執行翻頁操做
147  * @param  {[type]} content ajax獲取的內容
148  */
149 function editContent(content) {
150     var htmlPage = "";
151     htmlPage = '<div class="bb-item" style="display:block;"><div class="book-page pages" id="div_1.1_' + currentPage + '">' + content + '</div></div>';
152     // 從新設置currentPage
153     currentPage = Number(currentPage + loadType);
154     appendPage(htmlPage);
155     if (ftn == 'nextPage') {
156         Page();
157         config.bb.next();
158         currentIndex++;
159     } else if (ftn == 'prePage') {
160         // currentIndex初始爲0，由於在0前添加一頁，因此當前的值應爲1，因此此處加一
161         currentIndex++;
162         Page();
163         config.bb.prev();
164         currentIndex--;
165     }
166 }
167 /* 將頁面添加到書中 */
168 function appendPage(content) {
169     // 根據ftn的值判斷內容是追加在尾部，仍是追加在頭部
170     if (ftn == "nextPage") {
171         $("#bb-bookblock").append(content);
172     } else {
173         $("#bb-nav-next").after(content);
174     }
175     //當翻頁追加內容時，執行的函數
176     whenAppendHtmlPage(currentPage);
177     return;
178 }

採用Ajax方法獲取頁面內容

　　注：使用的插件版本爲：jquery.bookblock.js v1.0.2　　　　因爲插件中並未集成動態加載的功能，因此我對其進行了一些調整。　　　　修改處只有將 init 方法中的this.current = currentIndex;