turn.js学习手册

来源:互联网 发布:通达信软件编程 编辑:程序博客网 时间:2024/05/20 23:58

因为最近用到turn来做一个比赛,所以学习了一下,但是现在没有中文的API文档,所以就自己整理了一下

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

    <div id="flipbook"><div class="hard"> Turn.js </div><div class="hard"></div><div> Page 1 sddsasdssddsd</div><div> Page 2 </div><div> Page 3 </div><div class="hard"></div><div class="hard"></div>    </div>


    其中class=hard是为了模仿书本的封皮
    中间的div块则是书本的正文
    3)写入js,最简单的示例如下
    $("#flipbook").turn({    width: 400,   height: 300,   autoCenter: false});
采用的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
function isAnimating() {  if ($("#flipbook").turn("animating")) {    alert('Animating a page!');  }}


2)direction    返回页面的前进方向,左翻或者右翻,用法同上
3) display       返回当前的阅读模式,为单面或者双面显示
4) disabled     返回是否禁用,禁用返回true
5) page          返回当前页数
6) pages        返回总页数
7)size          返回大小,有两个键值   .width .height
8) options       返回初始化时的属性值,多个键值
9)view           返回视图
10)zoom          返回缩放因子
4.方法
   1)addPage       增加新的页
element = $("<div />").html("Loading...");$("#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实例
    if (!$("#flipbook").turn("is")) {// Create a new flipbook $("#flipbook").turn();}


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.事件

原创粉丝点击