基于jquery的插件turn.js学习笔记(一个可以实现3d书籍展示效果的插件)

弘涛
2023-12-01

基于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 or tl,tr or bl,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中添加新的页面

参数数据类型描述默认值
elementjquery元素想要添加的dom元素$("<div />")
pageNumbernumber想要往对应页面添加的页码数$("#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属性
如果flipbookoptionautoCenter设置为了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)

参数数据类型描述默认值
directionstringltr or rtl必须手动设定参数

示例

 

$("#flipbook").turn("direction", "rtl");
  • display

设置显示方式,一个视图中只显示一页(single)或者一个视图中显示两页(double
如果使用single的显示方式,则会给flipbook添加overflow:hidden样式

参数数据类型描述默认值
displayModestring设置显示方式必须手动设定参数

示例

 

$("#flipbook").turn("display", "single");
  • disable

禁用或启用效果。如果禁用,则用户不能修改该页面

参数数据类型描述默认值
disableboolean禁用或启用效果必须手动设定参数

示例

 

$("#flipbook").turn("disable", true);
  • hasPage

如果flipbook中存在相应页面则返回true

参数数据类型描述默认值
pageNumbernumber要查看是否存在页面的页码必须手动设定参数

示例

 

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

将视图转换到指定的页面

参数数据类型描述默认值
pagenumber要跳转到的页面的页码必须手动设定参数

示例

 

// 跳转到第10页
$("#flipbook").turn("page", 10);
  • pages

设置pages属性值。如果当前的pages值大于设置的pages值,则会移出flipbook中多出去的这一部分页面

参数数据类型描述默认值
pagesnumber值为当前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

在指定的页面角显示翻起页面的动画效果

参数数据类型描述默认值
cornerstring设置指定的角必须手动设定参数
animatebooleantrueanimation

示例

 

// Shows a peeling page at the bottom right corner
$("#flipbook").turn("peel", "br");
  • range

返回包含两个值得数组,第一个数值的含义是==下一个包含在dom树中页面的页码==,第二个数值的含义是在范围中的最后一个页码。这个范围一般满足如下关系:range[0] <= $("#flipbook").turn("page") <= range[1]

参数数据类型描述默认值
pageNumbernumber在范围内的页码$("#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

移除指定页面

参数数据类型描述默认值
pageNumbernumber需要移出的页面必须手动指定值

示例

 

// Delete the page 10
$("#flipbook").turn("removePage", 10);
  • resize

重新计算所有页面的尺寸和位置

该方法没有参数

示例

 

$("#flipbook").turn("resize");
  • size

设置flipbook的width和height

参数数据类型描述默认值
widthnumberflipbook的宽必须手动指定值
heightnumberflipbook的高必须手动指定值

示例

 

// 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,则保持原尺寸不进行缩放

参数数据类型描述默认值
factornumber放大或缩小的比例系数必须手动指定值

示例

 

// 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

当页面过渡动画结束时触发事件

参数数据类型描述
eventobject事件对象
pageObjectobject页面对象
pageTurnedboolean如果转到的是这个页面,返回true

示例

 

$("#flipbook").bind("end", function(event, pageObject, turned){
  alert("turn.end:" +pageObject.page);
});
  • first

当前页码为1时触发该事件

参数数据类型描述
eventobject事件对象

示例

 

$("#flipbook").bind("first", function(event) {
    alert("You are at the beginning of the flipbook");
});
  • last

在当前页码为最后一页的时候触发该事件

参数数据类型描述
eventobject事件对象

示例

 

$("#flipbook").bind("last", function(event) {
    alert("You are at the end of the flipbook");
});
  • missing

在某些处于当前页面范围内的页面被请求时触发该事件

参数数据类型描述
eventobject事件对象
pagesarray需要被添加页面的页码的数组

示例

 

$("#flipbook").bind("missing", function(event, pages) {
  for (var i = 0; i < pages.length; i++) {
    $(this).turn("addPage", $("<div />"), pages[i]);
  }
});
  • start

在页面的折叠动画效果开始时触发该动画。换句话说,在显示折叠起来的页面之前触发该动画

参数数据类型描述
eventobject事件对象
pageobjectobject页面对象
cornerstring页脚类型
默认行为
显示页脚折叠起来的效果

示例 如果你想阻止当使用页脚tl和tr时的动画效果,可以使用start时间并且阻止其默认行为

 

$("#flipbook").bind("start", function(event, pageObject, corner) {
  if (corner=="tl" || corner=="tr") {
    event.preventDefault();
  }
});
  • turning

当跳转页面之前触发该事件

参数数据类型描述
eventobject事件对象
pagenumber页码
viewarray新的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

在页面跳转之后触发该事件

参数数据类型描述
eventobject事件对象
pagenumber新的页码
viewarray新的view

示例

 

$("#flipbook").bind("turned", function(event, page, view) {
  alert("Page: "+page);
});
  • zooming

当页面的缩放尺寸发生改变的时候触发该事件

参数数据类型描述
eventobject事件对象
newZoomValuenumber新的缩放比例系数
currentZoomvaluenumber当前的缩放比例系数
默认行为
更改缩放比例系数

示例

 

$("#flipbook").bind("zooming", function(event,  newZoomValue, currentZoomValue) {
  alert("New zoom: "+currentZoomValue);
});

Zoom Events

  • doubleTap

当双击或双点视图元素时触发该事件

参数数据类型描述
eventobject事件对象

示例

 

$("#zoom-view").bind("zoom.doubleTap", function(event) {
    if ($(this).zoom("value")==1) {
        $(this).zoom("zoomIn", event);
    } else {
        $(this).zoom("zoomOut");
    }
});



作者:晨昏线_f197
链接:https://www.jianshu.com/p/b4149e0aff99
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 类似资料: