turn.js翻书特效

1.flipbook的部署
1）引入jquery以及turn的js库
2）写入Html

 

1. <div id="flipbook">

2. <div class="hard"> Turn.js </div>

3. <div class="hard"></div>

4. <div> Page 1 sddsasdssddsd</div>

5. <div> Page 2 </div>

6. <div> Page 3 </div>

7. <div class="hard"></div>

8. <div class="hard"></div>

9. </div>

    其中class=hard是为了模仿书本的封皮
    中间的div块则是书本的正文
    3）写入js，最简单的示例如下

1. $("#flipbook").turn({

2. width: 400,

3. height: 300,

4. autoCenter: false

5. });

采用的jQuery语法，简单的定义了此块的高宽以及是否居中
2.选项
1) width 、height（int）        定义宽高
2) autoCenter  （bool）          默认false，是否居中
3) page (int)                          设置初始化页面
4) acceleration(bool)           硬件加速，对于触摸设备，一定要设置true
5) direction("ltr"  "rtl") 书本翻动方向，默认从右向左(ltr) html css均可设置，详情见(http://www.turnjs.com/docs/Option:_direction)
6) display("double"  "single")  展示一页或者两页，默认double
7) duration(毫秒)             设置翻页动画持续时间即翻页的快慢，默认600
8) gradients(bool)             设置翻页时是否显示翻页跟阴影
9) elevation                  Sets the elevation of the page during the transition.
10) pages                     设置任意数量的页面
11) when
12) turnCorners
3.属性
1）animating    当页面翻动时，返回true

1. function isAnimating() {

2. if ($("#flipbook").turn("animating")) {

3. alert('Animating a page!');

4. }

5. }

2）direction     返回页面的前进方向，左翻或者右翻，用法同上
3) display       返回当前的阅读模式，为单面或者双面显示
4) disabled     返回是否禁用，禁用返回true
5) page           返回当前页数
6) pages         返回总页数
7）size           返回大小，有两个键值   .width .height
8) options       返回初始化时的属性值，多个键值
9）view           返回视图
10）zoom           返回缩放因子
4.方法
   1）addPage       增加新的页

1. element = $("<div />").html("Loading...");

2. $("#flipbook").turn("addPage", element, 10);

    2) center          居中设置
    3）destroy         销毁
   

$("#flipbook").turn("destroy")

    4) direction      设置图书翻页方向
   

$("#flipbook").turn("direction", "rtl");

    5）display        设置图书阅览方式，两页或者一页，同上
    6) disable         设置页面禁用
    7) hasPage        判断该页是否存在，返回bool
    8) next              翻页
   

$("#flipbook").turn("next");

    9) is         判断是否有turn实例

1. if (!$("#flipbook").turn("is")) {

2. // Create a new flipbook

3. $("#flipbook").turn();

4. }

10) page          跳转到指定页面
11) pages          设置页数，大于这个数量的将被删除
12) peel            显示一个翻页角

$("#flipbook").turn("peel", "br"); // 在右下角显示角

13) previous      返回上一个视图

$("#flipbook").turn("previous");

14) range         用于增加界面，详情(http://www.turnjs.com/docs/Method:_range)
15) removePage     删除一个页面，两个参数
16) resize           重新计算页面的大小跟位置
17) size           三个参数，设置大小
18) stop           没有动画的将页面跳转

$("#flipbook").turn("page", 10).turn('stop');

19) version        获取当前版本
20) zoom           缩放....
5.事件