基于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");
}
});
基于jquery的插件turn.js学习笔记的更多相关文章
- 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
- fullPage.js学习笔记
中秋节,一个人呆着,挺无聊的,还是学习最有趣,不论是什么,开阔视野都是好的. 参考网址:http://www.dowebok.com/77.html 上面有详细介绍及案例展示,很不错哦,可以先去看看 ...
- 【转】Backbone.js学习笔记(二)细说MVC
文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...
- 基于JQuery.timer插件实现一个计时器
基于JQuery.timer插件实现一个计时器,需要的朋友可以参考下. 先去官网下载jQuery Timers插件 ,然后引用到html中.这里是1.2 version 复制代码代码如下: < ...
- 基于 jQuery Jcrop 插件的功能模块:头像剪裁
/** Jcrop version: 0.9.12 jQuery version: 1.9.0 Author: 小dee Date: 2014.10.30 */ 先看看他山之石:博客园的头像模块也是使 ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
- 一点感悟:《Node.js学习笔记》star数突破1000+
写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...
- 基于jQuery日历插件制作日历
这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...
随机推荐
- Android Service不能再详细的教程
这篇包含了: Service后台服务.前台服务.IntentService.跨进程服务.无障碍服务.系统服务 几乎所有Android Service相关的东西. 前言 作为四大组件之一的Service ...
- ecloipse背景修改豆沙
Eclipse背景色的修改 Eclipse背景色的修改,修改为豆沙色 值是85 123 205 一.修改编辑区 ①这个比较简单一般都会不多说. 1.首先点击Window 然后选择Preferen ...
- leetCode题解之First Missing Positive
1.问题描述 2.题解思路 本题的思路是对于数组中每个正的元素,应该将其放到数组中对应的位置,比如元素1 ,应该放在数组的第一个位置.以此类推,最后检查数组中元素值和下标不匹配的情况. 3.代码 in ...
- Azure 镜像市场发布商指南
Azure 镜像市场发布商指南 本指南提供独立软件供应商产品上架到 Azure 镜像市场(以下简称 Azure 镜像市场)需要遵循的全流程. 文档适用范围 本指南适用于希望通过由世纪互联运营的Micr ...
- springMVC入门-05
接着上一讲,介绍如何查询单个数据,此处介绍show()方法的实现.显示单条数据需要使用Users对象中的一个字段作为入参来进行对象查询,将查询出来的数据放在Model中,并且将model中的user对 ...
- Jmeter入门--性能测试实战
测试需求:测试20个用户访问https://www.baidu.com在负载达到30QPS时的平均响应时间. QPS:QueryperSecond,每秒查询率.一台查询服务器每秒能够处理的查询次数.在 ...
- asp.net MVC4 框架揭秘 读书笔记系列3
IIS/ASP.net管道 本节全部用图形表示便于理解和记忆 1.3.1 IIS5.x与asp.net 1.3.2 IIS 6.0与asp.net 1.3.3 IIS7.0与asp.net 基于IIS ...
- 铁乐学Python_Day35_Socket模块3和hmac模块
验证客户端链接的合法性 如果你想在分布式系统中实现一个简单的客户端链接认证功能,又不像SSL那么复杂, 那么可以利用hmac+加盐的方式来实现. 例1:简单的服务端如下 #!/usr/bin/env ...
- windows 查看端口号,杀进程
查看端口号: 开始--运行--cmd netstat –and 杀进程: windows任务管理器 查看--显示列-PID 相关知识: 一台机器的80端口被httpd (apache) ...
- Mina使用总结(一)MinaServer
我们先看一个最简单的Mina Server服务端代码,该段代码实现了服务端Server启动并监听客户端请求 package com.bypay.mina.server; import java.io. ...