turn.js学习手册

因为最近用到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.事件

turn.js学习手册相关推荐

基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
EduCoder js学习手册15 答案
EduCoder js学习手册15 事件:指用户在网页上的操作或者网页元素加载过程中发生的事情. 比如,用鼠标点击了一个按钮,按下了回车键,鼠标移动到图片上,这些都是事件. 可以看出的是,每一个事件都 ...
JS学习手册十五事件处理
事件:指用户在网页上的操作或者网页元素加载过程中发生的事情. 比如,用鼠标点击了一个按钮,按下了回车键,鼠标移动到图片上,这些都是事件. 可以看出的是,每一个事件都和一个页面上的元素关联,或者和整个页 ...
node.js使用手册_权威的Node.js手册
node.js使用手册 Note: you can get a PDF, ePub, or Mobi version of this handbook for easier reference, or ...
prototype.js开发者手册
prototype.js开发者手册对应版本1.4.0 original article by sp('Sergio Pereira') Sergio Pereira last update: Mar ...
JavaScript 学习手册二
JavaScript 学习手册二:JS 数据类型第1关:JavaScript 数据类型介绍任务描述本关任务:在函数 objectTest() 内部定义了六个变量 a.b.c.d.e.f,并已经赋 ...
【转载】XML轻松学习手册
XML越来越热,关于XML的基础教程网络上也随处可见.可是一大堆的概念和术语往往让人望而生畏,很多朋友问我:XML到底有什么用,我们是否需要学习它?我想就我个人学习过程的心得和经验,写一篇比较全面的介 ...
html局部翻页效果,基于Turn.js 实现翻书效果实例解析
最近项目经理我个项目练练手,其项目需求是要实现翻书效果,看到这个需求后,我真是懵了,这咋整,我可是java出身的啊,这个问题真是难住我了,后来有同事的指导,之前他曾经做过PC版的翻书效果,当时使用的是 ...
turn.js异步加载实现翻书效果
<div class="m-art-cont"><script type="text/javascript" src="/Runti ...

turn.js学习手册

turn.js学习手册相关推荐

最新文章

热门文章