turnjs4学习笔记

前言

领导交代做一个电子书要在手机上能看，要有翻页的效果。本来想在网上直接找一个，无奈素材都要钱，巧的是发现了这个turnjs，实现了翻页的效果。学习了下，大概做个笔记，以后也方便看
make a flip book with HTML5

下载

官网： http://www.turnjs.com/
首页download下来里面包括所需要的js，一些例子和api

开始

准备工作

在html中用一个

作为容器管理所有的页面，往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

<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', $('
'), 3);

• dispaly

//一个参数 single/double 单页/双页 显示
$('.flipbook').turn('display', 'double');

//获取display属性值
$('.flipbook').turn('display');  //返回single or double

• destroy

//移除所有页
$('.flipbook').turn('destroy');

• 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

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