翻书插件: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 = '
' + content + '
'; 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;

转载于:https://www.cnblogs.com/huliang56/p/6252114.html

你可能感兴趣的:(翻书插件:bookblock.js)