urnjs4下载

官网： 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 double

removePage删除页面

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

hasPage页面是否存在

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

next翻到下一页

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

previous翻到上一页

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

is是否存在

//是否存在turn()实例
$('.flipbook').turn('is'); //存在返回true

page跳转指定页

//翻到指定页
$('.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缩放触发