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;

翻书插件:bookblock.js的更多相关文章

  1. 翻书插件:wowbook.js

    wowbook是一个jQuery插件,可以让你在网站中发布一本页面翻转效果超赞的书. demo演示 基本页面 <!DOCTYPE html> <html lang="en& ...

  2. 移动端翻页插件dropload.js(支持Zepto和jQuery)

    一. 声明 代码来源:github上的dropload项目. 二. 问题 dropload.js提供了最基本的上拉翻页,下拉刷新功能.对于由服务端一次返回所有数据的情况基本通用. 但是,需求往往不是服 ...

  3. 15 个最佳 jQuery 翻书效果插件

    本文为你带来15个非常实用的.实现类似翻书效果的jQuery插件,你可以很容易地整合到你的web应用中,提升用户体验. 1.  BookBlock BookBlock可以将任何内容(如图像.文本)创建 ...

  4. jQuery+turn.js翻书、文档和杂志3种特效演示

    很好用的一款插件jQuery+turn.js翻书.文档和杂志3种特效演示 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  5. turn.js实现翻书效果

    JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...

  6. JQuery的turn.js实现翻书效果

    前言: hello大家好~好久没更博了……今天来和大家分享下JQ的turn.js,下面我先来简单介绍下我们今天的主角turn.js. Turn.js是一个JavaScript库,它集合了HTML5的所 ...

  7. Unity3d:megaFierstext(翻书效果插件)

    附件中是一款翻书效果插件,由于附件上传大小限制,在下载完后,需要在megaFierstext_BHYF\Assets\Resources\Textures下添加图片精灵并修改属性为Texture,即可 ...

  8. Turn.js 实现翻书效果的学习与总结

    最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想 ...

  9. 【原创】jQuery插件 - Booklet翻书特效教程(一) 一般设置

    jQuery插件 - Booklet翻书特效教程(一) 一般设置 本文由五月雨恋提供,转载请注明出处. 一.宽高(width/height) 1.自定义大小 $(function(){ // 自定义页 ...

随机推荐

  1. Android中通信协议

    一.TCP/IP协议(传输层协议) 1.Socket与ServerSocket Socket是应用层与TCP/IP协议簇通讯的中间抽象层,Socket是一组接口,在设计模式中,Socket的设计就是门 ...

  2. 【设计模式】GoF设计模式学习总结

    什么是设计模式 为解决某一类普遍存在的问题而提供的一种解决方案: 分类及定义 创建型模式(5) 1.原型模式:通过复制一个已存在对象来生成一个新对象,被复制的对象称为原型:详情... 2.单例模式:一 ...

  3. crontab 启动 、运行 和编辑 查看

    cron服务是Linux的内置服务,但它不会开机自动启动.可以用以下命令启动和停止服务: /sbin/service crond start /sbin/service crond stop /sbi ...

  4. ZBrush中的头部模型该如何进行雕刻

    使用ZBrush®能够快速雕刻人物头部模型,教程只是大概介雕刻前的准备工作和一些软件基础,真正的雕刻还需要学习者具备一定的功底,本文向大家展示头部模型制作流程解析,初学者可以以它做参考拓展自己思路. ...

  5. Ioc和Ao使用扩展

    一.Bean作用域 spring容器创建的时候,会将所有配置的bean对象创建出来,默认bean都是单例的.代码通过getBean()方法从容器获取指定的bean实例,容器首先会调用Bean类的无参构 ...

  6. [LeetCode] Nth Highest Salary 第N高薪水

    Write a SQL query to get the nth highest salary from the Employee table. +----+--------+ | Id | Sala ...

  7. [LeetCode] Anagrams 错位词

    Given an array of strings, return all groups of strings that are anagrams. Note: All inputs will be ...

  8. 类EF框架Chloe.ORM升级:只为更完美

    扯淡 Chloe.ORM:一款轻量.高效的.NET C#数据库访问框架(ORM).查询接口借鉴 Linq(但不支持 Linq).借助 lambda 表达式,可以完全用面向对象的方式就能轻松执行多表连接 ...

  9. FCM聚类算法介绍

    FCM算法是一种基于划分的聚类算法,它的思想就是使得被划分到同一簇的对象之间相似度最大,而不同簇之间的相似度最小.模糊C均值算法是普通C均值算法的改进,普通C均值算法对于数据的划分是硬性的,而FCM则 ...

  10. bootstrop 日期控件 datepicker被弹出框dialog覆盖的解决办法

    筒子们在使用bootstrap的日期控件(datepicker , 现在官网提供的名称叫 datetimepicker)时可能会遇到如上图的问题这是啥原因造成的呢? 答案很简单时输出的优先级造成的(z ...