脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Turn.js实现翻书效果

使用Turn.js实现翻书效果的完整步骤

 更新时间：2023年12月06日 15:50:17   作者：hhupp1809684284  
最近项目经理我个项目练练手,其项目需求是要实现翻书效果,下面这篇文章主要给大家介绍了关于使用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

按比例缩书的大小

总结

到此这篇关于使用Turn.js实现翻书效果的文章就介绍到这了,更多相关Turn.js实现翻书效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论