BookBlock 是一个 jQuery插件，用来制作带有翻页效果的小书册。
可以用任何形式的内容，比如图像或文本。
插件会在翻页时利用变形模拟手工翻页，并产生重叠的阴影以达到更逼真的效果。
基本页面
<div id="bb-bookblock" class="bb-bookblock">
<!-- 左右翻页按钮 -->
<div class="bb-nav-prev" id="bb-nav-prev"></div>
<div class="bb-nav-next" id="bb-nav-next"></div>
<div class="bb-item">
<!-- 页面内容 -->
</div>
<div class="bb-item">
<!-- 页面内容 -->
</div>
<div class="bb-item">
<!-- 页面内容 -->
</div>
<div class="bb-item">
<!-- 页面内容 -->
</div>
</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去请求内容，从而做到看多少，加多少。
下面的代码是我根据自己工作需要做的，可供参考。
/************************ 动态读取页面内容 ************************/
/**
* 采用Ajax方法获取页面内容
* author:huliang;
* date:2017/1/11
*/
// 翻页插件的配置
var config = '';
// 翻页插件中，要显示的页（主要用于首次进入时）
var currentIndex = 0;
// 判断当前状态是否可以执行翻页操作
var handleFlag = true;
// 两次翻书的间隔时间，防止快速翻页出现BUG
var timeOut = 1200;
// 设置向前、向后翻页的标志
var ftn = '';
/**
* 用于表示在加载content文件夹下的html的规则
* loadType = 1 ，逐个加载页面
* loadType = 2 ，只加载奇数页
* @type {Number}
*/
var loadType = 2;
// 当前显示的页号
var currentPage = 1;
// 书本中页面的总数量（总数量+2）
var maxPage = 130; //翻书效果
function Page() {
config = {
$bookBlock: $('#bb-bookblock'),
$navNext: $('#bb-nav-next'),
$navPrev: $('#bb-nav-prev'),
bb: $('#bb-bookblock').bookblock({
speed: 800,
shadowSides: 0.8,
shadowFlip: 0.7,
onEndFlip: function(page, isLimit) {
return false;
}
})
};
}
// 当检测到向前翻页的事件时执行
function whenClickPrevBtn() {
// 根据handleFlag的处理情况，判断是否响应此次操作
if (handleFlag) {
handleFlag = false;
// timeOut毫秒内，不重复响应其它操作
setTimeout(function() {handleFlag = true;}, timeOut); // 判断是否是第一页
if (currentPage == loadType + 1) {
commonNotice("已到第一页！");
return;
}
ftn = "prePage";
console.log("do prePage");
prePage2();
}
}
// 当检测到向后翻页的事件时执行
function whenClickNextBtn() {
// 根据handleFlag的处理情况，判断是否响应此次操作
if (handleFlag) {
handleFlag = false;
// timeOut毫秒内，不重复响应其它操作
setTimeout(function() {handleFlag = true;}, timeOut); // 判断是否是最后一页
if (maxPage - currentPage < 2) {
commonNotice("已到最后一页！");
return;
}
ftn = "nextPage";
console.log("do nextPage");
nextPage2();
}
} /* 获取页面链接上的hash，用于判定当前的页面的值 */
function loadCurPageByHash() {
var search = window.location.search;
if(search.length){
var _array = search.split("=");
currentPage = Number(_array[_array.length - 1]);
}
} /**
* 判断页面是否已被加载
* @param {[type]} currentPage [当前页]
* @return {Boolean}
*/
function isPageLoaded(currentPage) {
var id = "div_1.1_" + currentPage;
var html = document.getElementById(id);
return $(html).length ? true : false;
} /* 向 右→ 翻页 */
function prePage2() {
currentPage = currentPage - loadType*2;
if(isPageLoaded(currentPage)){
// 页面已加载，重新设置currentPage
currentPage = Number(currentPage + loadType);
config.bb.prev();
currentIndex--;
return;
}else{
// 加载新页面
doLoadPage(currentPage);
}
}
/* 向 ←左 翻页 */
function nextPage2() {
if(isPageLoaded(currentPage)){
// 页面已加载，重新设置currentPage
currentPage = Number(currentPage + loadType);
config.bb.next();
currentIndex++;
return;
}else{
// 加载新页面
doLoadPage(currentPage);
}
} /**
* 通过Ajax请求页面内容
* @param {[type]} currentPage [当前页]
*/
function doLoadPage(currentPage) {
var fileName = "content/1.1_" + currentPage + ".html";
$.ajax({
url: fileName,
type: "GET",
async: true,
success: function(data) {
editContent(data);
}
});
}
/**
* 根据页面内容，拼接bb-item，最后执行翻页操作
* @param {[type]} content ajax获取的内容
*/
function editContent(content) {
var htmlPage = "";
htmlPage = '<div class="bb-item" style="display:block;"><div class="book-page pages" id="div_1.1_' + currentPage + '">' + content + '</div></div>';
// 重新设置currentPage
currentPage = Number(currentPage + loadType);
appendPage(htmlPage);
if (ftn == 'nextPage') {
Page();
config.bb.next();
currentIndex++;
} else if (ftn == 'prePage') {
// currentIndex初始为0，因为在0前添加一页，所以当前的值应为1，所以此处加一
currentIndex++;
Page();
config.bb.prev();
currentIndex--;
}
}
/* 将页面添加到书中 */
function appendPage(content) {
// 根据ftn的值判断内容是追加在尾部，还是追加在头部
if (ftn == "nextPage") {
$("#bb-bookblock").append(content);
} else {
$("#bb-nav-next").after(content);
}
//当翻页追加内容时，执行的函数
whenAppendHtmlPage(currentPage);
return;
}
采用Ajax方法获取页面内容
注：使用的插件版本为：jquery.bookblock.js v1.0.2
由于插件中并未集成动态加载的功能，所以我对其进行了一些调整。
修改处只有将 init 方法中的this.current = currentIndex;