html5左右翻页turnjs4HTML5 制造电子翻书

页面功能解释

在html中用一个<div/>作为容器管理所有的页面，往div内添加页面有三种办法：

直接在flipbook里面添加元素

<div id="flipbook"> <div>第1页</div> <div>第2页</div> <div>第3页</div></div>

用api里供应的方法添加

html5左右翻页turnjs4HTML5 制造电子翻书 Bootstrap

<div id="flipbook"> </div>

第一种和第二种办法结合

<div id="flipbook"> <div>第1页</div>  <div>末了1页</div></div>样式功能解释hard属性

<div id="flipbook"> <div class="hard">第1页</div> <div>第2页</div> <div>第3页</div></div>own-size属性-纸张大小

<div id="flipbook"> <div class="own-size" style="width: 200px; height: 200px;">第1页</div> <div class="own-size" style="width: 200px; height: 200px;">第2页</div> <div>第3页</div></div>p[0-9]+ 样式增加

//设置页面样式 <div id="flipbook"> <div>第1页</div> //在css中写.p1{}, 第一页会自己加上.p1 <div>第2页</div> <div>第3页</div></div>布局方法

$('#flipbook').turn([options]);配置项解释

$('.flipbook').turn({ width: 922, //宽度 height: 600, //高度 acceleration: true, //硬件加速, 默认true, 如果是触摸设备设置为true autoCenter: false, //自动居中, 默认false display: 'double', //单页显示/双页显示 single/double duration: 1000, //翻页速率(毫秒), 默认600ms gradients: true, //翻页时的阴影渐变, 默认true inclination: 0, page: 1, //设置当前显示第几页 //pages: 4, //总页数 when: {} //监听事宜});利用方法解释语法

$('.flipbook').turn('方法名'[, 参数],); //不须要turn()返回值的时候，可以连这写$('.flipbook').turn('方法名'[, 参数],).turn('方法');addPage增加页面

//增加一页//两个参数 1,jquery工具（页面） 2,页号（非必填,默认是往末了一页后面加一页）$('.flipbook').turn('addPage', $('<div/>'), 3);dispaly单双页设置

//一个参数 single/double 单页/双页显示$('.flipbook').turn('display', 'double');//获取display属性值$('.flipbook').turn('display'); //返回single or doubleremovePage删除页面

//移除指定页//一个参数页号$('.flipbook').turn('removePage' , 2); //移除第二页hasPage页面是否存在

//指定页是否存在//一个参数页号$('.flipbook').turn('hasPage' , 1); //如果该页存在，返回truenext翻到下一页

//翻到下一页$('.flipbook').turn('next');previous翻到上一页

//翻到上一页$('.flipbook').turn('previous');is是否存在

//是否存在turn()实例$('.flipbook').turn('is'); //存在返回truepage跳转指定页

//翻到指定页$('.flipbook').turn('page' , 2); //翻到第二页//返回当前显示第几页$('.flipbook').turn('page');pages设置总页数

//设置总页数$('.flipbook').turn('pages' , 2);//返回总页数$('.flipbook').turn('pages');peel那个角度翻页

//展示从哪个角翻页//一个参数 tl-左上角 bl-左下角 tr-右上角 br-右下角 l-左 r-右$('.flipbook').turn('peel' , 'br');//不显示$('.flipbook').turn('peel' , false);// r和l在设置class=hard时才有效果size设置大小

//设置大小//两个参数 1,width 2,height$('.flipbook').turn('size', 922 ,600);//返回纸的大小{width: xx, height:xx}$('.flipbook').turn('size'); stop停滞翻页效果

//停滞动画效果$('.flipbook').turn('page', 3).turn('stop'); //没有翻页动画zoom缩放

//缩放//两个参数 1,缩放倍数 2, 缩放动画持续事宜（觉得没起浸染啊）$('.flipbook').turn('zoom', 0.6, 500);//返回缩放倍数，默认1$('.flipbook').turn('zoom'); 事宜利用解释

两种办法添加事宜

1. turn()布局方法里面的 when: {}2. bind()

start动作开始触发

//页面上的任何一个动作开始触发when: { start: function (event, page, pageObj) { console.log('start'); }$('.flipbook').bind('start', function (event, page, pageObj) { console.log('start');});end动作结束触发

//页面上的任何一个动作结束触发when: { end: function (event, page, pageObj) { console.log('end'); }$('.flipbook').bind('end', function (event, page, pageObj) { console.log('end');});first第一页触发

//当在第一页时触发when: { first: function (event) { console.log('first page'); }$('.flipbook').bind('first', function (event) { console.log('first page');});last末了一页触发

//当在末了一页时触发when: { last: function (event) { console.log('last page'); }$('.flipbook').bind('last', function (event) { console.log('last page');});turning翻页前触发

//翻页前触发//event//page $('.flipbook').turn('page') //view $('.flipbook').turn('view'); when: { turning: function (event, page, view) { console.log('turning', page, view); //page 和 view 显示的是当前展示的页号 }$('.flipbook').bind('turning', function (event, page, view) { console.log('turning', page, view);});turned翻页后触发

//翻页后触发//event//page $('.flipbook').turn('page')//view $('.flipbook').turn('view'); when: { turned: function (event, page, view) { console.log('turned'); }$('.flipbook').bind('turned', function (event, page, view) { console.log('turned');});zooming缩放触发

//缩放触发//event//newFactor 缩放的倍数//current 缩放前的倍数when: { turned: function (event, newFactor, current) { console.log(newFactor, current); }}