基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记
简介
turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果。可以很好的适应于ios和安卓等触摸设备。
How it works?
下面是官网展示的最简单的一个应用实例
1.编写html部分
<div id="flipbook"><div class="hard"> Turn.js </div> <div class="hard"></div><div> Page 1 </div><div> Page 2 </div><div> Page 3 </div><div> Page 4 </div><div class="hard"></div><div class="hard"></div>
</div>
2.编写js部分
$("#flipbook").turn({width: 400,height: 300,autoCenter: true
});
API参考
构造函数
这个构造函数定义了filpbook和zoom在哪里创建,因此这个构造函数只能被调用一次并且不能被省略。flipbook和zoom都有单独的构造函数
turn的构造函数
语法
$("#flipbook").turn([options]);
事例
$("#flipbook").turn({page: 1, acceleration: true, gradients: true});
zoom的构造函数
##### 语法
$("#zoom-viewport").zoom(options);
OPTIONS
Turn Options
acceleration:boolean
默认值true使用触摸时设备时值必须为true
autoCenter:boolean
默认值false是否居中
direction:string
默认值ltr指定翻页的方向,ltr:从左到右;rtl:从右到左
示例
在options中配置属性
$("#flipbook").turn({direction:"rtl"});
在标签中直接设置属性
<div id="flipbook" dir="rtl"><!--Pages-->
</div>
在css中设置属性
#flipbook {direction:rtl;
}
display:string
默认值double设置书籍的显示样式,double显示双面,single显示单面
duration:number
默认值:600设置翻页动画的快慢,设置为0时,不会有翻页动画
gradient:boolean
默认值:true设置动画过渡效果时的阴影效果
height:number
默认值:$("flipbook").height()
设置flipbook的高度
elevation:number
默认值:0设置动画时的高度(elevation)
page:number
默认值:1设置初始化flipbook时的页面数
pages:number
默认值:$("#flipbook").children().length
为书籍添加任意的页数,默认值为当前书籍的页数。如果设置的页数大于当前fliplook中已存在的页面数,会使用addPage方法动态的添加这些页面
turnCorners:string
默认值:bl,br设置翻页时可使用的页角,像使用page,next,previous等方法时
样式:{left-corner},{right-corner}
可能的值:bl,br
ortl,tr
orbl,tr
示例
//自动翻页
var way = 1;setInterval(function() {//当前页面为第一页,只能向后翻页if (way==1) {$("#flipbook").turn("next");//当翻到最后一页时,只能向前翻if ($("#flipbook").turn("page")== $("#flipbook").turn("pages")) {way = 2;$("#flipbook").turn("options", {turnCorners: "tl,tr"});}} else {$("#flipbook").turn("previous");if ($("#flipbook").turn("page")==1) {way = 1;$("#flipbook").turn("options", {turnCorners: "bl,br"});}}
}, 1000);
when:{}
默认值:空对象设置事件监听
$("#flipbook").turn({when: {turning: function(event, page, pageObject) {// Implementation}
}
});
width:number
默认值:$("#flipbook").width()
设置页面宽度
Zoom Options
easeFunction:string
默认值:ease-in-out
定义过渡动画中加速度曲线模式
可选的值有:
- default
- linear
- ease-in
- ease-out
- ease-in-out
- cubic bezier (require points)
duration:number
默认值:600
定义了过渡动画的快慢,设置为0时没有过渡效果
max:number or function
默认值:必须手动设置值
设置缩放因子的最大值,值为缩放时的最大比例系数
示例
- 参数值为number
// This will increase three times the size of the flipbook
//缩放的时候系数为3倍
$("#zoom-viewport").zoom({flipbook: $("#flipbook"),max: 3
});
- 参数值为function
// If we want to make the flipbook 3000 width when zoomed in.
//缩放到指定宽度3000
$("#zoom-viewport").zoom({flipbook: $("#flipbook"),max: function() {return 3000/$('.magazine').width();}
});
flipbook:jquery element
默认值:必须手动设置
指向zoom作用的内容
示例
$("#flipbook").turn();
$("#zoom-viewport").zoom({flipbook: $("#flipbook"),max: 3
});
when:object
默认值:{}
设置事件监听
示例
$("#zoom-viewport").turn({when: {doubleTap: function(event) {// Implementation}
}
});
Properties
flipbook的Properties
语法
$("#flipbook").turn("propertyName");
animating
当前页面如果有动画效果(翻页的时候)返回true
示例
function isAnimating() {if ($("#flipbook").turn("animating")) {alert('Animating a page!');}
}
direction
返回当前书籍的翻页方向,返回值为ltr或rtl
示例
$("#flipbook").turn("direction");
display
返回当前书籍的显示方式,返回值为double或single
示例
alert("The current display is: " + $("#flipbook").turn("display"));
disabled
是否禁用,禁用返回true
page
获取当前的页面值
示例
alert("The current page is: "+$("#flipbook").turn("page"));
pages
获取当前书的总页面数
示例
alert("#flipbook has " + $("#flipbook").turn("pages") + " pages");
pages
获取当前书的尺寸,返回值为一个对象,包括两个内容:width和height
示例
var size = $("#flipbook").turn("size");
alert("Width: "+size.width + ", Height:"+size.height);
options
获取初始化书籍时设置的options
示例
var duration = $("#flipbook").turn("options").duration;
alert("The duration of the transition is "+duration);
view
获取当前的view
示例
var view = $("#flipbook").turn("view").join(" and ");
alert("Current view: "+view);
zoom
获取flipbook的缩放系数因子。默认值为1,代表当使用尺寸相关方法时flipbook会使用与原始尺寸相同的尺寸(不会改变尺寸)
示例
var zoom = $("#flipbook").turn("zoom");
alert("Current zoom: "+zoom);
zoom的Properties
value
返回当前的zoom值
示例
function zoomedIn() {//值为1代表没有进行缩放if ($("#zoom-viewport").turn("value")==1)alert("No zoom");//值大于1代表当前有缩放效果else if ($("#zoom-viewport").turn("value")>1)alert("Zoomed In");
}
Methods
Turn Methods
方法用于执行诸如翻页或者更改属性状态等操作
语法
$("#flipbook").turn('method name'[, argument1, argument2]);
当方法没有返回值时,可以与另一个方法连接
$("#flipbook").turn("method1").turn("method2");
addPage
向flipbook中添加新的页面
参数 | 数据类型 | 描述 | 默认值 |
---|---|---|---|
element | jquery元素 | 想要添加的dom元素 |
$("<div />")
|
pageNumber | number | 想要往对应页面添加的页码数 |
$("#flipbook").turn("pages")+1 默认添加到最后一页
|
示例 如果要向第十页添加新页面,可以这样
element = $("<div />").html("Loading...");
$("#flipbook").turn("addPage", element, 10);
或者 设置新页面元素的class值为"p10"也可以指明要插入的页面为第十页
element = $("<div />", {"class": "p10"}).html("Loading...");
$("#flipbook").turn("addPage", element);
center
根据可见的页面数量来决定flipbook的center。这个方法修改
flipbook
的css属性margin-left
以至于将flipbook放置于中心。因此如果需要修改margin-left
,最好需要将flipbook
放置到一个容器div中来方便修改其margin
属性
如果flipbook
的option
的autoCenter
设置为了true
,则不需要使用这个方法
这个方法没有参数
示例
$("#flipbook").turn("center");
使用这个方法时,其实是为
flipbook
设置了如下css
样式
#flipbook{transition:margin-left 1s;-webkit-transition:margin-left 1s;-moz-transition:margin-left 1s;-o-transition:margin-left 1s;-ms-transition:margin-left 1s;transition:margin-left 1s;
}
destory
消除flipbook。从dom树,内存和事件监听器中删除所有页面
删除flipbook的同时也会自动删除zoom(如果定义了的话)
该方法没有参数
示例
$("#flipbook").turn("destroy");
也可以删除这些页面的容器
#flipbook
,如下
$("#flipbook").turn("destroy").remove();
direction
设置flipbook的翻页方向(ltr,rtl)
参数 | 数据类型 | 描述 | 默认值 |
---|---|---|---|
direction | string |
ltr or rtl
|
必须手动设定参数 |
示例
$("#flipbook").turn("direction", "rtl");
display
设置显示方式,一个视图中只显示一页(
single
)或者一个视图中显示两页(double
)
如果使用single
的显示方式,则会给flipbook
添加overflow:hidden
样式
参数 | 数据类型 | 描述 | 默认值 |
---|---|---|---|
displayMode | string | 设置显示方式 | 必须手动设定参数 |
示例
$("#flipbook").turn("display", "single");
disable
禁用或启用效果。如果禁用,则用户不能修改该页面
参数 | 数据类型 | 描述 | 默认值 |
---|---|---|---|
disable | boolean | 禁用或启用效果 | 必须手动设定参数 |
示例
$("#flipbook").turn("disable", true);
hasPage
如果flipbook中存在相应页面则返回true
参数 | 数据类型 | 描述 | 默认值 |
---|---|---|---|
pageNumber | number | 要查看是否存在页面的页码 | 必须手动设定参数 |
示例
function checkPage(page) {if ($("#flipbook").turn("hasPage", page)) {alert("Page "+page+" is already in the flipbook");}
}// Check if page 1 is in the flipbook
checkPage(1);
previous
转向上一页的视图
该方法没有参数
示例
$("#flipbook").turn("previous");
也可以转换两个视图
$("#flipbook").turn("previous").turn("previous");
next
转向下一页的视图
该方法没有参数
示例
$("#flipbook").turn("next");
也可以转换两个视图
$("#flipbook").turn("next").turn("next");
is
检测jq选择器中是否创建了turn.js的实例
示例
if (!$("#flipbook").turn("is")) {// Create a new flipbook $("#flipbook").turn();
}
page
将视图转换到指定的页面
参数 | 数据类型 | 描述 | 默认值 |
---|---|---|---|
page | number | 要跳转到的页面的页码 | 必须手动设定参数 |
示例
// 跳转到第10页
$("#flipbook").turn("page", 10);
pages
设置pages属性值。如果当前的pages值大于设置的pages值,则会移出flipbook中多出去的这一部分页面
参数 | 数据类型 | 描述 | 默认值 |
---|---|---|---|
pages | number | 值为当前flipbook中页面的总数 | 必须手动设定参数 |
示例
$("#flipbook").turn("pages", 5);
$("#flipbook").turn("hasPage", 10); // It’s true.
$("#flipbook").turn("pages", 5); // Sets 5 pages
$("#flipbook").turn("hasPage", 10); // Returns false
peel
在指定的页面角显示翻起页面的动画效果
参数 | 数据类型 | 描述 | 默认值 |
---|---|---|---|
corner | string | 设置指定的角 | 必须手动设定参数 |
animate | boolean | true | animation |
示例
// Shows a peeling page at the bottom right corner
$("#flipbook").turn("peel", "br");
range
返回包含两个值得数组,第一个数值的含义是==下一个包含在dom树中页面的页码==,第二个数值的含义是在范围中的最后一个页码。这个范围一般满足如下关系:
range[0] <= $("#flipbook").turn("page") <= range[1]
参数 | 数据类型 | 描述 | 默认值 |
---|---|---|---|
pageNumber | number | 在范围内的页码 |
$("#flipbook").turn("page")
|
示例 为了能够动态的添加页面,可以使用range方法
var range = $("#flipbook").turn("range", 10);for (var page = range[0]; page<=range[1]; page++){if (!$("#flipbook").turn("hasPage", page)) {$("#flipbook").turn("addPage", $("<div />"), page); }
}
removePage
移除指定页面
参数 | 数据类型 | 描述 | 默认值 |
---|---|---|---|
pageNumber | number | 需要移出的页面 | 必须手动指定值 |
示例
// Delete the page 10
$("#flipbook").turn("removePage", 10);
resize
重新计算所有页面的尺寸和位置
该方法没有参数
示例
$("#flipbook").turn("resize");
size
设置flipbook的width和height
参数 | 数据类型 | 描述 | 默认值 |
---|---|---|---|
width | number | flipbook的宽 | 必须手动指定值 |
height | number | flipbook的高 | 必须手动指定值 |
示例
// Resize the flipbook to 1000x600
$("#flipbook").turn("size", 1000, 600);
stop
停止当前的过渡动画
该方法没有参数
示例
// 转到第十页并且取消过渡动画
$("#flipbook").turn("page", 10).turn(‘stop’);
version
获得当前的发行版本信息
示例
$("#flipbook").turn("version");
// Output is 4.0.6
zoom
放大或缩小flipbook的尺寸,根据放大系数更改flipbook的宽和高。如果放大系数为1,则保持原尺寸不进行缩放
参数 | 数据类型 | 描述 | 默认值 |
---|---|---|---|
factor | number | 放大或缩小的比例系数 | 必须手动指定值 |
示例
// Reduce the size in half of the flipbook
$("#flipbook").turn("zoom", 0.5);
Zoom Methods
destory
销毁zoom viewport
如果flipbook被其destory方法销毁,那么zoom viewport会自动的销毁
该方法没有参数
示例
$("#zoom-viewport").turn("destroy");
zoomIn
放大flipbook
该方法没有参数
示例
$("#zoom-viewport").turn("zoomIn");
zoomOut
还原flipbook
该方法没有参数
示例
$("#zoom-viewport").turn("zoomOut");
Events
Turn Events
事件可以支持定义在特殊时刻的行为。有两种不同的方法可以定义
1.在options中使用
当添加事件监听器时,会需要构造函数在创建flipbook前添加监听器(when),例如
$("#flipbook").turn({when: {turning: function(event, page, pageObject) {// Implementation}
}
});
2. 用bind方法
jquery提供了一个bind方法来给元素绑定监听器。可以为一个事件使用bind去添加你需要的任意多的监听器,例如
$("#flipbook").bind("turning", function(event, page, pageObject) {// Implementation
});
如果option 的 prefix的值为true,那么需要加一个前缀turn,如下
$("#flipbook").bind("turn.turning", function(event, page, pageObject) {// Implementation
});
使用事件对象
第一个所有监听函数共享的参数是事件对象,允许你操纵扩展和默认的事件,一些时间的后面可以跟随一个动作,例如可以转动页面。因此,可以通过event.preventDefault()来阻止默认操作。在事件函数中,没必要再返回false去阻止默认行为
事件
end
当页面过渡动画结束时触发事件
参数 | 数据类型 | 描述 |
---|---|---|
event | object | 事件对象 |
pageObject | object | 页面对象 |
pageTurned | boolean | 如果转到的是这个页面,返回true |
示例
$("#flipbook").bind("end", function(event, pageObject, turned){alert("turn.end:" +pageObject.page);
});
first
当前页码为1时触发该事件
参数 | 数据类型 | 描述 |
---|---|---|
event | object | 事件对象 |
示例
$("#flipbook").bind("first", function(event) {alert("You are at the beginning of the flipbook");
});
last
在当前页码为最后一页的时候触发该事件
参数 | 数据类型 | 描述 |
---|---|---|
event | object | 事件对象 |
示例
$("#flipbook").bind("last", function(event) {alert("You are at the end of the flipbook");
});
missing
在某些处于当前页面范围内的页面被请求时触发该事件
参数 | 数据类型 | 描述 |
---|---|---|
event | object | 事件对象 |
pages | array | 需要被添加页面的页码的数组 |
示例
$("#flipbook").bind("missing", function(event, pages) {for (var i = 0; i < pages.length; i++) {$(this).turn("addPage", $("<div />"), pages[i]);}
});
start
在页面的折叠动画效果开始时触发该动画。换句话说,在显示折叠起来的页面之前触发该动画
参数 | 数据类型 | 描述 |
---|---|---|
event | object | 事件对象 |
pageobject | object | 页面对象 |
corner | string | 页脚类型 |
默认行为 |
---|
显示页脚折叠起来的效果 |
示例 如果你想阻止当使用页脚tl和tr时的动画效果,可以使用start时间并且阻止其默认行为
$("#flipbook").bind("start", function(event, pageObject, corner) {if (corner=="tl" || corner=="tr") {event.preventDefault();}
});
turning
当跳转页面之前触发该事件
参数 | 数据类型 | 描述 |
---|---|---|
event | object | 事件对象 |
page | number | 页码 |
view | array | 新的view |
默认行为 |
---|
跳转页面 |
示例
$("#flipbook").bind("turning", function(event, page, view) {alert("Turning the page to: "+page);
});
可以阻止页面跳转到第一页
$("#flipbook").bind("turning", function(event, page, view) {if (page==1) {event.preventDefault();}
});
turned
在页面跳转之后触发该事件
参数 | 数据类型 | 描述 |
---|---|---|
event | object | 事件对象 |
page | number | 新的页码 |
view | array | 新的view |
示例
$("#flipbook").bind("turned", function(event, page, view) {alert("Page: "+page);
});
zooming
当页面的缩放尺寸发生改变的时候触发该事件
参数 | 数据类型 | 描述 |
---|---|---|
event | object | 事件对象 |
newZoomValue | number | 新的缩放比例系数 |
currentZoomvalue | number | 当前的缩放比例系数 |
默认行为 |
---|
更改缩放比例系数 |
示例
$("#flipbook").bind("zooming", function(event, newZoomValue, currentZoomValue) {alert("New zoom: "+currentZoomValue);
});
Zoom Events
doubleTap
当双击或双点视图元素时触发该事件
参数 | 数据类型 | 描述 |
---|---|---|
event | object | 事件对象 |
示例
$("#zoom-view").bind("zoom.doubleTap", function(event) {if ($(this).zoom("value")==1) {$(this).zoom("zoomIn", event);} else {$(this).zoom("zoomOut");}
});
转载于:https://www.cnblogs.com/yuxi-G/p/yuxig.html
基于jquery的插件turn.js学习笔记相关推荐
- backbone.js学习笔记
backbone.js学习笔记 之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还 ...
- Vue.js学习笔记 2022 04 17
Vue.js学习笔记 1 Vue.js基础 Vue.js介绍 vuejs 渐进式 JavaScript 框架 Vue.js 如何应用 1 在普通html项目中,引入VUE.JS Hb 的项目 生成的 ...
- Wow.js学习笔记
Wow.js学习笔记 前期准备 注意:通过引入cdn的树懒,注意版本问题(小白我就是因为失败就去乖乖下载wow.js本地文件) 1.wow.js 因依赖于animate.css,首先在头部引用anim ...
- 千锋Node.js学习笔记
千锋Node.js学习笔记 文章目录 千锋Node.js学习笔记 写在前面 1. 认识Node.js 2. NVM 3. NPM 4. NRM 5. NPX 6. 模块/包与CommonJS 7. 常 ...
- nest.js学习笔记(一)
nest.js学习笔记(一) 一.安装nest.js 前置条件 运行项目 目录介绍 二.nest.js cli 常用命令 三.RESTful 风格设计 1.接口url 2.RESTful 版本控制 四 ...
- node.js学习笔记
# node.js学习笔记标签(空格分隔): node.js---## 一 内置模块学习 ### 1. http 模块 ``` //1 导入http模块 const http =require('ht ...
- 基于jQuery日历插件制作日历
这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...
- Node.js学习笔记8
Node.js学习笔记8 HTTP服务器与客户端 Node.js的http模块,封装了一个高效的HTTP服务器和一个简易的HTTP客户端 http.server是一个基于事件的HTTP服务器,核心由N ...
- node.js学习笔记5——核心模块1
node.js学习笔记5--核心模块1 Node.js核心模块主要内容包括:(1)全局对象 (2)常用工具 (3)事件机制 (4)文件系统访问 (5)HTTP服务器与客户端 一: 全局对象 Node. ...
最新文章
- 使用C++的Socket实现从客户端到服务端,服务端到客户端传输文件
- 在已交出句柄的QWidget上叠加透明形状
- mysql判断是否建立索引_判断mysql中列是否要添加索引的标准
- 探讨打造会呼吸的数据中心
- vue ui 创建项目 ,添加样式时报错,通过vue ui安装less-loader 和less 依赖后报错,百度告诉说版本太高导致
- matlab记录路径,matlab对文件目录路径的操作
- html计算器_学习HTML、CSS和JavaScript的最佳方法是什么?
- Oracle中索引位图转换的优势
- python鼠标右键检测按钮_如何检测右键单击+左键单击
- 【转】SQL SERVER 开窗函数简介
- 计算机维修费税收分类,维修费税收分类编码是多少?
- 2020年mathorcup数模A题总结回顾
- mysql 创建函数报错_MySQL 创建函数时报错'ERROR 1336 (0A000): Dynamic SQL'
- 一个学习C语言的好网站,推荐给大家
- FMI飞马网 | 了解人工智能,30份书单不容错过(附电子版PDF下载)
- 手机版minecraft java材质_材质包 - Minecraft Wiki,最详细的官方我的世界百科
- 目标检测透视变换数据增强包含label(yolov5格式)
- 仿生眼部植入物使英国盲人患者能够检测视觉信号
- maps-api-v3_Google Maps API的自适应设计,视网膜图像和调试
- 二维动态数组空间分配 c语言,科学网—C语言中动态二维数组的使用和分配 - 王一哲的博文...
热门文章
- windows下mysql解压包安装
- 如何查看windows某个目录下所有文件/文件夹的大小
- ORA-12514:tns监听程序当前无法识别连接描述符中请求服务;ORA-03113:通信通道的文件结尾
- 基于 Workman 实现Web扫描登录
- 2002-2003 ACM-ICPC Northeastern European Regional Contest (NEERC 02) A Amusing Numbers (数学)
- Android动画-帧动画
- 死锁(Deadlock)
- Android ------ handler 异步处理消息
- 活动目录数据库重定向或迁移
- Linux下安装配置 Jdk1.6+Tomcat5.5