turnjs4下载
官网： http://www.turnjs.com/
首页download下来里面包括所需要的js，一些例子和api
页面功能说明
在html中用一个<div/>作为容器管理所有的页面，往div内添加页面有三种方式：
直接在flipbook里面添加元素
<div id="flipbook">
<div>第1页</div>
<div>第2页</div>
<div>第3页</div>
</div>用api里提供的方法添加
<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属性-纸张大小
<!--自定义书内纸张大小，style-->
<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);
}
}
