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

最新推荐文章于 2024-03-12 13:53:53 发布

蔡馨

最新推荐文章于 2024-03-12 13:53:53 发布

阅读量1.1k

点赞数 2

分类专栏： web前端学习

原文链接：https://www.jianshu.com/p/b4149e0aff99

版权

web前端学习专栏收录该内容

63 篇文章 1 订阅

订阅专栏

基于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中添加新的页面

参数	数据类型	描述	默认值
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);

转向上一页的视图
该方法没有参数

示例

$("#flipbook").turn("previous");

也可以转换两个视图

$("#flipbook").turn("previous").turn("previous");

转向下一页的视图
该方法没有参数

示例

$("#flipbook").turn("next");

也可以转换两个视图

$("#flipbook").turn("next").turn("next");

检测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去阻止默认行为

事件

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

参数	数据类型	描述
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");
    }
});

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

蔡馨

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
基于jquery的插件turn.js学习笔记（一个可以实现3d书籍展示效果的插件）

基于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.
复制链接

扫一扫