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 }
注：使用的插件版本为：jquery.bookblock.js v1.0.2
由于插件中并未集成动态加载的功能，所以我对其进行了一些调整。
修改处只有将 init 方法中的this.current = currentIndex;