turnjs4学习笔记

前言

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

下载

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