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.事件
阅读全文
0 0
- turn.js学习手册
- js 在线学习手册
- ajax prototype.js 学习手册
- js手册学习--Document 对象
- js手册学习--Event 对象
- js学习手册--Window 对象
- Node.js学习入门手册
- Turn.js 书本翻页效果
- turn.js单页翻书页面
- prototype的学习--prototype.js开发者手册
- js手册学习--Form 和 Input 对象
- js学习手册--Option 和 Select 对象
- turn.min.js 达到书翻页效果
- turn.js 类似书籍翻页的效果
- javaScript+turn.js实现图书翻页效果
- webrtc学习: 部署stun和turn服务器
- webrtc学习: 部署stun和turn服务器
- prototype使用学习手册指南之Position.js
- Spring 动态代理分析&AOP的XML的方式&注解方式
- python尝试从通联数据爬取信息并保存在mongodb数据库中
- c#设计模式之开放封闭原则
- JS数据类型、类型转换
- Java架构师必看的10本书
- turn.js学习手册
- POJ 2352 Stars (线段树)
- 虚拟内存
- 第十章:vue2中axios请求服务端数据
- 四海八荒,就是上神也需要电脑维修
- 【c++】友元关系和子类函数构造函数的写法
- Hdu 6148 Valley Numer 数位DP
- 10个Eclipse珍藏插件推荐
- 树莓派3 搭建bt下载机---利用 transmission-daemon