Turn.js实现翻书效果
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 |
按比例缩书的大小 |
更多推荐
所有评论(0)