最近写一个pdf阅读页,但是返回的数据里既有pdf文件,也有图片集,就索性写两种浏览模式,用booklet的原因是相对于turn.js方法事件比较清晰,效果吧在这里也够用。
方法、事件、参数这里就不一一介绍了,官网里描述的很清晰。booklet官网
下面是效果图:
整体思路:
1、因为是一整本书,图片数量都是几千张,一次加载导致页面直接崩溃,所以初始化booklet的时候只截取图片的前几张,提高页面响应速度
2、然后在执行页面翻页(change)事件的时候给他添加页数,翻一次添加两页。当页数大于等于图片数量时,停止添加。
html部分
<div class="bookContainer"> <!--给一个书厚度的背景图--> <div class="bookletBackground"> <!--里面放图片DOM,初始化booklet--> <div id="bookletContent"></div> </div> <!--书本相对来说比较小,添加一个遮罩层,显示每页图片的原图,也就是放大效果--> <div class="modal fade" id="bookletModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog showBooklet"></div> </div> </div>
js部分
1 //获取浏览器内容区高度 2 var clientH = window.innerHeight; 3 //定义数组接收截取的图片数据 4 var picData = []; 5 //起始位置 6 var s=0; 7 //结束位置 8 var e=6; 9 10 /** 11 * 创建图片DOM 12 */ 13 function buildBookletHtml(picList){ 14 var html = '' 15 $.each(picList,function(index,item){ 16 html += '<div class="pageContent" style="cursor:pointer">'; 17 html += '<img class="imgAuto" data-toggle="modal" data-target="#bookletModal" src="'+item.path+'"/>'; 18 html += '</div>'; 19 }); 20 $('#bookletContent').html(html); 21 } 22 23 /** 24 *初始化booklet 25 */ 26 function initBooklet(){ 27 $('#bookletContent').booklet({ 28 width:clientH*1.4, 29 height:clientH, 30 speed:600, 31 arrows:true, 32 manual:false, 33 pageNumbers:false 34 }); 35 } 36 37 /** 38 * 初始化图片数据,默认只加载6张 39 */ 40 function initPicData(picList){ 41 picData = picList.slice(s,e); 42 buildBookletHtml(picData) 43 initBooklet(); 44 } 45 46 /** 47 * booklet翻页事件 48 * 每翻一次,就增加俩页 49 */ 50 function bookletEvents(picList){ 51 if(e<picList.length){ 52 //翻书时 53 $('#bookletContent').bind('bookletchange',function(){ 54 picData = picList.slice(e,e+2); 55 e=e+2; 56 $.each(picData,function(index,item){ 57 var html = '<div class="pageContent" style="cursor:pointer">'; 58 html += '<img class="imgAuto" data-toggle="modal" data-target="#bookletModal" src="'item.path+'"/>'; 59 html += '</div>'; 60 $('#bookletContent').booklet('add','end',html); 61 }); 62 }); 63 } 64 } 65 66 /** 67 *点击图片显示相应的遮罩层原图 68 *这里用的事件委托,原因是每次翻页都会新增DOM。如果直接给img绑定点击事件,新添加的不会触发事件 69 */ 70 function showBookletBind(){ 71 $('#bookletContent').on('click',function(ev){ 72 var ev = ev || window.event; 73 var target = ev.target || ev.srcElement; 74 if(target.className === 'imgAuto'){ 75 $('.showBooklet').empty(); 76 $('.showBooklet').html(target.outerHTML); 77 $('.showBooklet').css({'width':'auto','padding':'20px 30px'}); 78 } 79 }); 80 } 81 82 /** 83 *获取数据 84 */ 85 function getPicData(){ 86 var url = ''; 87 $.post(url,{id:id},function(data){ 88 var picList = data.picList; 89 initPicData(picList); 90 bookletEvents(picList); 91 }); 92 } 93 94 /** 95 *初始化页面 96 */ 97 function init(){ 98 getPicData(); 99 showBookletBind(); 100 } 101 102 init();
以上呢就是booklet的使用过程,也算记录一下吧。