赞
踩
// 基本用法
$("#flipbook").turn({
acceleration:true,
})
// 加速--------------------------------------------
//设置硬件加速模式,对于触摸设备,此值必须为true。
option : acceleration
type : Boolean
Default Value : true
//自动居中--------------------------------------------
option : autoCenter
type : Boolean
Default Value : false
usage :
+++++++++++++++++++++
#flipbook{
-webkit-transition:margin-left 0.2s ease-in-out;
-moz-transition:margin-left 0.2s ease-in-out;
-o-transition:margin-left 0.2s ease-in-out;
-ms-transition:margin-left 0.2s ease-in-out;
transition:margin-left 0.2s ease-in-out;
}
+++++++++++++++++++++
//方向--------------------------------------------
指定从左到右(DIR = ltr,默认值)或从右到左(DIR = rtl)的活动簿的方向性。
option : direction
type : String
Default Value : ltr
usage :
+++++++++++++++++++++
js:
$(“ #flipbook”).turn({direction:“ rtl” });
html:
< div id = “ flipbook” dir = “ rtl” >
<!-Pages->
</ div >
css:
#flipbook {
方向:rtl ;
}
+++++++++++++++++++++
//显示--------------------------------------------
设置显示模式。使用单页 single 显示每个视图仅一页,或使用双页 double 显示两个页面。
option : display
type : String
Default Value : double
//过渡时间--------------------------------------------
设置过渡的持续时间(以毫秒为单位)。如果设置为0(零),则翻页时将不会进行过渡。
Option: duration
type : Number
Default Value : 600
//渐变色--------------------------------------------
在过渡期间显示渐变和阴影。
Option: gradients
type : Boolean
Default Value : true
//高度--------------------------------------------
设置活动页的高度
option : height
type : Number
Default Value : $(“flipbook”).height()
//高程--------------------------------------------
设置过度期间页面的高程
option : elevation
type : Number
Default Value : 0
//页--------------------------------------------
设置’初始化’页面数量
option : page
type : Number
Default Value : 1
//页面--------------------------------------------
设置任意数量的页面。如果页面数大于#flipbook中的元素数,则必须使用addPage方法动态添加这些页面。
option : pages
type : Number
Default Value : $("#flipbook").children().length
//翻页角--------------------------------------------
option : turnCorners
type : String
Default Value : bl,br
格式
{left-corner},{right-corner}
可能的值
bl,br或tl,tr 或bl,tr
例
var way = 1 ;
setInterval(function () {
if(way == 1){
KaTeX parse error: Expected 'EOF', got '#' at position 4: (“ #̲flipbook”).turn…(“ #flipbook”).turn(“ page”)== $(“ #flipbook“).turn(” pages“)){
方式= 2 ;
$(” #flipbook“).turn(” options“,{turnCorners:” tl,tr“ });
}
} else {
$(”
“上一个”);if($(“ #flipbook”).turn(“ page”)== 1){
方式= 1 ;
$(“ #flipbook”).turn(“ options”,{turnCorners:“ bl,br” });
}
}
},1000);
//何时--------------------------------------------
option : when
type : Object
Default Value : Empty object
For example:
$("#flipbook").turn({when: {
turning: function(event, page, pageObject) {
// Implementation
}
}
});
//宽度--------------------------------------------
option : width
type : Number
Default Value : $("#flipbook").width();
//动画--------------------------------------------
设置页面动画时,即折叠页面可见时,返回true。
Example:
function isAnimating() {
if ($("#flipbook").turn(“animating”)) {
alert(‘Animating a page!’);
}
}
//方向--------------------------------------------
返回活动簿的当前方向。即从左到右(DIR = ltr,默认值)或从右到左(DIR = rtl)。
Property: direction
例:
$(“ #flipbook”).turn(“ direction”);
//显示--------------------------------------------
获取当前显示。它可以是single或double。
Property: display
例:
alert(“当前显示为:” + $(“ #flipbook”).turn(“ display”));
//禁用--------------------------------------------
如果禁用了活页簿,则返回true。
Property: disabled
//页--------------------------------------------
获取当前页。
例:
alert(“当前页面为:” + $(“ #flipbook”).turn(“ page”));
//页面--------------------------------------------
获取活动簿中的页数。
例:
alert(“ #flipbook具有” + $(“ #flipbook”).turn(“ pages”)+ “ pages”);
//大小--------------------------------------------
获取活动簿的大小。这将是一个具有两个键,width和height的对象。
Property: size
例:
var size = $(“ #flipbook”).turn(“ size”);
alert(“ Width:” + size.width + “,Height:” + size.height);
//选项--------------------------------------------
获取创建活动簿时使用的选项。
Property: options
Example:
var duration = $("#flipbook").turn(“options”).duration;
alert("The duration of the transition is "+duration);
//视图--------------------------------------------
获取当前视图。
例:
var view = $(“ #flipbook”).turn(“ view”). join (“和”);
alert(“当前视图:” + view);
//缩放--------------------------------------------
获取活动簿的乘法因子。默认值为1,这意味着活动簿的大小与size方法指定的大小相同。
Property: zoom
Example:
var zoom = $("#flipbook").turn(“zoom”);
alert("当前缩放: "+zoom);
//添加页面--------------------------------------------
Method: addPage
++++++++++++++++++++
参数 类型 描述 默认值
element jQuery element Pointer to the DOM element of the page $("
要插入第10页,您可以执行以下操作:
element = $(“
要么
element = $(“
请注意,CSS类p10 也指示要插入的页码。
//中心--------------------------------------------
根据可见的页面数量来使活动簿居中。center方法更改#flipbook的CSS margin-left属性,以使活动簿居中。因此,如果需要更改活动簿的左边距,建议将活动簿插入容器中以使用其边距属性。
如果活动簿的autoCenter选项设置为true,则可能不必使用此方法。
Method: center
例:
$(“ #flipbook”).turn(“ center”);
居中时添加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;
}
//销毁--------------------------------------------
销毁活页簿。也就是说,它将删除DOM树和内存以及事件侦听器中的所有页面。
Method: destroy
例:
$(“ #flipbook”).turn(“ destroy”);
您还可以删除容器#flipbook,例如:
$(“ #flipbook”).turn(“ destroy”). remove ();
注意:销毁活动簿会自动破坏缩放视口(如果已定义)。
//方向--------------------------------------------
设置活动簿的方向性。即从左到右(DIR = ltr,默认值)或从右到左(DIR = rtl)。
Method: direction
++++++++++++++++++++
参数 类型 描述 默认值
direction String left-to-right (ltr) or right-to-left (rtl) You must specify this parameter
++++++++++++++++++++
Example:
$("#flipbook").turn(“direction”, “rtl”);
//显示--------------------------------------------
设置显示。有两种显示模式:单视图每个视图只显示一页,而双视图则每个视图只显示两页。
Method: display
++++++++++++++++++++
参数 类型 描述 默认值
displayMode String Display value You must specify this parameter
++++++++++++++++++++
例:
$(“ #flipbook”).turn(“ display”,“ single”);
注意:使用单一显示将规则overflow:hidden隐藏到活动簿中。
//禁用--------------------------------------------
禁用并启用效果。如果禁用,则用户将无法更改当前页面。
Method: disable
++++++++++++++++++++
参数 类型 描述 默认值
disable Boolean Enables or disables the effect You must specify this parameter
++++++++++++++++++++
Example:
$("#flipbook").turn(“disable”, true);
//hasPage--------------------------------------------
如果活动簿有页面,则返回true。
Method: hasPage
++++++++++++++++++++
参数 类型 描述 默认值
pageNumber Number 页码 您必须指定此参数
++++++++++++++++++++
Example:
function checkPage(page) {
if ($("#flipbook").turn(“hasPage”, page)) {
alert(“Page “+page+” is already in the flipbook”);
}
}
//检查是否页面1处于翻书
checkPage(1);
// 下一个--------------------------------------------
将视图转到下一个视图。
Method: next
例:
$(“ #flipbook”).turn(“ next”);
例:
$(“ #flipbook”).turn(“ next”);
// is--------------------------------------------
检测选择器是否具有turn.js实例。
Method: is
例:
if(!$(“ #flipbook”).turn(“is”)){
//创建一个新的翻书
$(“ #flipbook”).turn();
}
//制定页面--------------------------------------------
将页面转到参数中指定的页面。
Method: page
++++++++++++++++++++
参数 类型 描述 默认值
page Number Page number You must specify this parameter
++++++++++++++++++++
Example:
// Turn to the page 10
$("#flipbook").turn(“page”, 10);
//页面--------------------------------------------
设置页数。如果页数少于当前页数,则其他页将从活动簿中删除。
将页面转到参数中指定的页面。
Method: pages
++++++++++++++++++++
参数 类型 描述 默认值
pages Number Amount of pages You must specify this parameter
++++++++++++++++++++
Example:
$("#flipbook").turn(“pages”, 5);
Another example:
$("#flipbook").turn(“hasPage”, 10); // It’s true.
$("#flipbook").turn(“pages”, 5); // Sets 5 pages
$("#flipbook").turn(“hasPage”, 10); // Returns false
//剥离--------------------------------------------
在指定的角落显示一个剥离页面。
Method: peel
++++++++++++++++++++
参数 类型 描述 默认值
corner String Corner You must specify this parameter
animate Boolean true Animation
++++++++++++++++++++
Example:
// Shows a peeling page at the bottom right corner
$("#flipbook").turn(“peel”, “br”);
//上一个 --------------------------------------------
将视图转到上一个视图。
Method: previous
例:
$(“ #flipbook”).turn(“previous”);
您还可以从当前视图向后退两个视图:
$(“ #flipbook”).turn(“previous”).turn(“previous”);
//范围 --------------------------------------------
Method: range
返回一个由两个值组成的数组,其中第一个元素引用一个页码,DOM树中应包含该页码。
第二个元素引用范围的最后一页号。也就是说,当前范围始终具有以下关系:range [0] <= $(“#flipbook”)。turn(“ page”)<= range [1]
++++++++++++++++++++
参数 类型 描述 默认值
pageNumber Number 范围内的页码 $(“ #flipbook”).turn(“page”)
++++++++++++++++++++
例如,为了动态添加新页面,可以使用range方法:hod:
var range = $("#flipbook").turn(“range”, 10);
for (var page = range[0]; page<=range[1]; page++){
if (!$("#flipbook").turn(“hasPage”, page)) {
$("#flipbook").turn(“addPage”, $("
假设显示为两倍,则这些页面为[8,9,10,11,12,13]。
//删除页面 --------------------------------------------
Method: removePage
++++++++++++++++++++
参数 类型 描述 默认值
pageNumber Number The page to remove You must specify the parameter
++++++++++++++++++++
Example:
// Delete the page 10
$("#flipbook").turn(“removePage”, 10);
//调整大小 --------------------------------------------
重新计算所有页面的大小和位置
Method: resize
例:
$(“ #flipbook”).turn(“resize”);
//尺寸 --------------------------------------------
设置活动簿的大小。
Method: size
++++++++++++++++++++
参数 类型 描述 默认值
width Number The page to remove You must specify the parameter
height Number The page to remove You must specify the parameter
++++++++++++++++++++
Example:
//调整翻书为1000x600
$("#flipbook").turn(“size”, 1000, 600);
//停止 --------------------------------------------
停止当前过渡。
Method: stop
//将页面切换到10,而不进行过渡
$(“ #flipbook”).turn(“ page”,10).turn(‘stop’);
//版本 --------------------------------------------
获取当前发行版本。
$(“ #flipbook”).turn(“ version”);
//输出为4.0.6
//缩放 --------------------------------------------
增加或减小活动簿的大小。缩放方法根据缩放比例更改活动簿的宽度和高度。
如果因子为1,则翻书将采用size方法指定的原始大小。
Method: zoom
++++++++++++++++++++
参数 类型 描述 默认值
factor Number Factor of multiplication You must specify the parameter
++++++++++++++++++++
Example:
将活动簿 缩小一半。
$("#flipbook").turn(“zoom”, 0.5);
//结束 --------------------------------------------
页面转换停止时触发此事件。
Event: end
++++++++++++++++++++
参数 类型 描述
event Object Event Object
pageObject Object The page object
pageTurned Boolean True if the page was turned
++++++++++++++++++++
Example:
$("#flipbook").bind(“end”, function(event, pageObject, turned){
alert(“turn.end:” +pageObject.page);
});
事件顺序
开始 Start
转弯 Turning
转身 Turned
结束 End
//第一 --------------------------------------------
当前页面为1时触发此事件。
Event: first
++++++++++++++++++++
参数 类型 描述
event Object Event Object
++++++++++++++++++++
Example:
$("#flipbook").bind(“first”, function(event) {
alert(“您在动画书的开头”);
});
//最后 --------------------------------------------
当前页是活动簿的最后一页时,将触发此事件。
Event: last
++++++++++++++++++++
参数 类型 描述
event Object Event Object
++++++++++++++++++++
Example:
$("#flipbook").bind(“last”, function(event) {
alert(“You are at the end of the flipbook”);
});
//失踪 --------------------------------------------
当前范围中需要某些页面时,将触发此事件。
Event: missing
++++++++++++++++++++
参数 类型 描述
event Object Event Object
++++++++++++++++++++
例:
$(“ #flipbook”). bind(“ missing”,function (event,pages) {
for(var i = 0 ; i <pages.length; i ++){
(
t
h
i
s
)
.
t
u
r
n
(
“
a
d
d
P
a
g
e
”
,
(this).turn(“ addPage”,
(this).turn(“addPage”,(“
//开始 --------------------------------------------
Event: start
++++++++++++++++++++
参数 类型 描述
event Object 事件对象
pageObject Object 页面对象
corner Number 角型
++++++++++++++++++++
默认动作
显示折叠的页面
例如,如果要防止在使用tl和tr角时开始播放动画,则可以使用start事件并阻止其默认操作:
$("#flipbook").bind(“start”, function(event, pageObject, corner) {
if (corner==“tl” || corner==“tr”) {
event.preventDefault();
}
});
//转弯 --------------------------------------------
翻页之前触发此事件。
Event: turning
++++++++++++++++++++
参数 类型 描述
event Object 事件对象
page Number 页码
view Array The new view
++++++++++++++++++++
默认动作
翻页
例如:
$(“ #flipbook”). bind(“ turning”,function (event,page,view) {
alert(“将页面转到:” + page);
});
您可以防止转到第1页。
$(“ #flipbook”). bind(“ turning”,function (event,page,view) {
if(page == 1){
event.preventDefault();
}
});
//已转弯 --------------------------------------------
翻页后触发此事件。
Event: turned
++++++++++++++++++++
参数 类型 描述
event Object 事件对象
page Number The new page number
view Array The new view
++++++++++++++++++++
For example:
$("#flipbook").bind(“turned”, function(event, page, view) {
alert("Page: "+page);
});
//缩放 --------------------------------------------
更改缩放比例时触发此事件。
Event: zooming
++++++++++++++++++++
参数 类型 描述
event Object The event object
newZoomValue Number 新的缩放系数
currentZoomValue Number 当前缩放系数
++++++++++++++++++++
默认动作
改变变焦
For example:
$("#flipbook").bind(“zooming”, function(event, newZoomValue, currentZoomValue) {
alert("New zoom: "+currentZoomValue);
});
样式直接看官方文档–
http://www.turnjs.com/
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。