当前位置:   article > 正文

Turn.js实现翻书效果

turn.js
1 trun.js简介

Turn.js是一个JavaScript库,它集合了HTML5的所有优点,可以使我们的内容看起来像一本书           或杂志,有真实的翻阅的效果。

它使用HTML5和CSS3来执行效果,所以它可以在iOS设备(iPad,iPhone,iPod)和Android设备等触摸设备上很好地工作~

Turn.js具有比Flash内容拥有真实HTML内容的所有优势,除了感觉到本机内容(可选内容,没有第三方上下文菜单)之外,还可以添加广告代码,HTML5视频,工具提示,图像,地图,表单,跟踪每个页面并将它们与数百个精巧的库组合在一起用于网络。

2 trun.js 版本支持

需要

JQuery 1.7或更高版本

浏览器支持

Safari for iOS (iPad, iPhone, iPod)

Safari 5 

Chrome 11 

Chrome for Android 

Firefox 9 

IE 9 

IE 8 (需要使用 turn.html4.js)

3 trun.js 安装

trun.js 官网      Turn.js: The page flip effect in HTML5

首先需要安装并引入jQuery,安装完成后引入turn.js

如果使用npm安装引用turn.js会报错

安装jQuery

 

vue.config.js中配置

项目中使用

 

4.trun.js准备HTML

    Turn.js使用DOM元素作为所有页面的容器。这DOM元素通常是书。有三种方法可以添加书页。

(一) 直接添加

直接在容器中添加页面。HTML包含所有书页

(二)通过API动态添加

HTML仅包含容器,并且所有页面都将是动态的通过Ajax请求获取数据后添加

 (三)两者相结合

有时候最好是HTML中的一些页面已经加载然后动态加载的其他的界面

 

5.trun.js 情况

Turn.js可以处理很长的动画书。也就是说不需要限制关于它可以包含的页面数量。这是因为turn.js只在DOM中保留最后6页,虽然会有对先前引用内容进行再次加载,但是可以减少缓存以便于释放存储器。

6.IE8/7 支持

turn.js库包括turn.html4.js,它针对IE 8进行了优化以及任何其他不支持CSS3特性的浏览器比如变换。您可以使用CSS技巧来包含turn.html4.js适用于旧版本的IE,但建议使用Modernizr库和资源加载器(如YepNope.js)可以在modernizr.com上找到。

7.CSS一览

odd/even: 用来显示设置为双显示时的奇数页/偶数页

fixed :指示不从DOM中删除页面即使页面超出了范围

hard:设置页面的硬过渡效果。通过将所有页面设置为硬页面

p[0-9]+ :此类描述特定页面。例如,.p1表示到第一页、.p2到第二页,依此类推。您可以在中更改页码,无论其顺序如何

shadow:描述了动画书的可见区域。它围绕着活页夹,所以适合做阴影

sheet:使页面看起来像一张纸。这是所有页面的默认样式

8.控制书的大小

有三种方法可以控制书的大小

8.1 使用css

8.2 使用属性

8.3 使用size方法

9.display属性

该显示定义了动画书中可见的页面数量。在iPad或iPhone上使用turn.js时,会有一些如果设备的方向是纵向的,翻页会出现问题。因此,turn.js引入了一个名为single的新视图。那里有两个视图:double,显示两个页面;single,显示仅显示一页

 10.ignoring属性

Turn.js中的元素会保留一个名为ignore的HTML属性,该属性可以添加对于动画书中的某些元素,不要将它们选为页面。

ignore标记的页面在display :‘double’时会展示在左侧第一页

dispaly:single 时正常展示 

 11.构造器

构造函数是将容器转换为书。为turn.js使用一个实例,所以没有必要对其进行外部引用,注意构造函数只有一个名为options的参数而且它是可选的

options可选参数

选项

类型

默认值

描述

acceleration

Boolean

true

设置硬件加速模式,用于触摸设备此值必须是真的

autoCenter

Boolean

false

是否居中

display

String

single

single 单页书,double 双页书

duration

Number

600

设置翻页动画时间,单位:毫秒

gradients

Number

true

置翻页时是否显示翻页跟阴影

height

Number

null

设置高度

page

Number

1

返回当前页数

pages

Number

Dom的页数

页码总数

when

Object

{}

监听事件

width

Number

null

设置宽度

12.when常用监听事件

监听事件名

介绍

返回值

turning

翻页前触发

event--事件对象 整个动画书

page-- 翻页后的页码,

view-- 翻页后的dom

turned

翻页后触发

event--事件对象

page-- 翻页后的页码,

view-- 翻页后的dom

start

页面开始时触发

event--事件对象

page-- 页码,

pageObject -- 页面数据

end

页面停止时触发

event--事件对象

page-页码,

pageObject -- 页面数据

first

第一页触发

event--事件对象

last

最后一页触发

event--事件对象

zooming

当缩放改变时触发此事件

event--事件对象

newFactor -- 新的缩放比例

current -- 当前缩放比例

13.属性

14.方法

方法名

参数1

参数2

描述

addPage

element

需要添加的dom元素

pageNumber

可选,你希望插入页面的位置,默认值为当前的总页数+1(最后一页)

将页面添加到动画书中

display

displayMode

display 的类型 single,double 默认值为double

控制书是单页书还是双页书

disable

disable (Boolean)

True表示禁用效果,false表示启用

禁用和启用效果。如果它被禁用,用户将不能够更改当前页面(效果,所有书页不允许翻动,鼠标移动到书角不会有翻页动画)

destroy

$(‘#flipbook’).turn(‘destroy’); 只销毁书页,不销毁容器

$(‘#flipbook’).turn(‘destroy’).remove();

容器也销毁

销毁动画书。它将删除DOM和内存

hasPage

pageNumber

要查询的是第几页

如果页在内存中,则返回true

next

$(‘#flipbook’).turn(‘next’);

将视图转到下一个视图(翻到下一页)

is

if (!$(‘#flipbook’).turn(‘is’)) { $(‘#flipbook’).turn();

}

检测选择器是否有turn.js实例(检查当前选中的dom元素是否已经转化为动画书了)

page

page

需要跳转到的界面

跳转到指定界面

pages

pages

页面总数

设置动画书的页数。如果数字的页面数小于当前页面数,它将删除这些超出范围的页面

peel

corner

 可选值tl(左上), tr(右上), bl, br, r, l.

显示一个剥落的角落--(展示一个书角的翻页hover)

previous

$(‘#flipbook’).turn(‘previous’

将视图转换为上一个视图-(跳转到翻页前的页面)

range

pageNumber

范围内的页码。此参数

是可选的,默认值是当前的DOM上下标

它返回一个由两个值组成的数组,第一个数值表示当切换到pageNumber页时DOM中存在的第一页的下标,第二个数值表格DOM中存在的最后一页的下标,为了动态添加新页面,使用这个方法是必须的。

removePage

pageNumber

要删除的页码数

从DOM中删除页面及其所有引用

resize

重新计算所有页面的位置

size

width

宽度

height

高度

设置书的尺寸

stop

停止当前动画。例如,可以直接跳转到指定页面,(不带动画)

zoom

factor

倍数2能增大一倍 0.5则缩小一倍

duration

缩放动画持续时间(毫秒)默认值为500

按比例缩书的大小

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/花生_TL007/article/detail/117137
推荐阅读