欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用Turn.js實(shí)現(xiàn)翻書效果的完整步驟

 更新時(shí)間：2023年12月06日 15:50:17   作者：hhupp1809684284  
最近項(xiàng)目經(jīng)理我個(gè)項(xiàng)目練練手,其項(xiàng)目需求是要實(shí)現(xiàn)翻書效果,下面這篇文章主要給大家介紹了關(guān)于使用Turn.js實(shí)現(xiàn)翻書效果的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

1 trun.js簡(jiǎn)介

Turn.js是一個(gè)JavaScript庫，它集合了HTML5的所有優(yōu)點(diǎn)，可以使我們的內(nèi)容看起來像一本書或雜志，有真實(shí)的翻閱的效果。

它使用HTML5和CSS3來執(zhí)行效果，所以它可以在iOS設(shè)備（iPad，iPhone，iPod）和Android設(shè)備等觸摸設(shè)備上很好地工作~

Turn.js具有比Flash內(nèi)容擁有真實(shí)HTML內(nèi)容的所有優(yōu)勢(shì)，除了感覺到本機(jī)內(nèi)容（可選內(nèi)容，沒有第三方上下文菜單）之外，還可以添加廣告代碼，HTML5視頻，工具提示，圖像，地圖，表單，跟蹤每個(gè)頁面并將它們與數(shù)百個(gè)精巧的庫組合在一起用于網(wǎng)絡(luò)。

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 官網(wǎng)      Turn.js: The page flip effect in HTML5

首先需要安裝并引入jQuery，安裝完成后引入turn.js

如果使用npm安裝引用turn.js會(huì)報(bào)錯(cuò)

安裝jQuery

vue.config.js中配置

項(xiàng)目中使用

4.trun.js準(zhǔn)備HTML

Turn.js使用DOM元素作為所有頁面的容器。這DOM元素通常是書。有三種方法可以添加書頁。

（一） 直接添加

直接在容器中添加頁面。HTML包含所有書頁

（二）通過API動(dòng)態(tài)添加

HTML僅包含容器，并且所有頁面都將是動(dòng)態(tài)的通過Ajax請(qǐng)求獲取數(shù)據(jù)后添加

（三）兩者相結(jié)合

有時(shí)候最好是HTML中的一些頁面已經(jīng)加載然后動(dòng)態(tài)加載的其他的界面

5.trun.js 情況

Turn.js可以處理很長的動(dòng)畫書。也就是說不需要限制關(guān)于它可以包含的頁面數(shù)量。這是因?yàn)閠urn.js只在DOM中保留最后6頁，雖然會(huì)有對(duì)先前引用內(nèi)容進(jìn)行再次加載，但是可以減少緩存以便于釋放存儲(chǔ)器。

6.IE8/7 支持

turn.js庫包括turn.html4.js，它針對(duì)IE 8進(jìn)行了優(yōu)化以及任何其他不支持CSS3特性的瀏覽器比如變換。您可以使用CSS技巧來包含turn.html4.js適用于舊版本的IE，但建議使用Modernizr庫和資源加載器(如YepNope.js)可以在modernizr.com上找到。

7.CSS一覽

odd/even: 用來顯示設(shè)置為雙顯示時(shí)的奇數(shù)頁/偶數(shù)頁

fixed ：指示不從DOM中刪除頁面即使頁面超出了范圍

hard：設(shè)置頁面的硬過渡效果。通過將所有頁面設(shè)置為硬頁面

p[0-9]+ ：此類描述特定頁面。例如，.p1表示到第一頁、.p2到第二頁，依此類推。您可以在中更改頁碼，無論其順序如何

shadow：描述了動(dòng)畫書的可見區(qū)域。它圍繞著活頁夾，所以適合做陰影

sheet：使頁面看起來像一張紙。這是所有頁面的默認(rèn)樣式

8.控制書的大小

有三種方法可以控制書的大小

8.1 使用css

8.2 使用屬性

8.3 使用size方法

9.display屬性

該顯示定義了動(dòng)畫書中可見的頁面數(shù)量。在iPad或iPhone上使用turn.js時(shí)，會(huì)有一些如果設(shè)備的方向是縱向的，翻頁會(huì)出現(xiàn)問題。因此，turn.js引入了一個(gè)名為single的新視圖。那里有兩個(gè)視圖：double，顯示兩個(gè)頁面；single，顯示僅顯示一頁

10.ignoring屬性

Turn.js中的元素會(huì)保留一個(gè)名為ignore的HTML屬性，該屬性可以添加對(duì)于動(dòng)畫書中的某些元素，不要將它們選為頁面。

ignore標(biāo)記的頁面在display ：‘double’時(shí)會(huì)展示在左側(cè)第一頁

dispaly：single 時(shí)正常展示 

11.構(gòu)造器

構(gòu)造函數(shù)是將容器轉(zhuǎn)換為書。為turn.js使用一個(gè)實(shí)例，所以沒有必要對(duì)其進(jìn)行外部引用，注意構(gòu)造函數(shù)只有一個(gè)名為options的參數(shù)而且它是可選的

options可選參數(shù)

選項(xiàng)

類型

默認(rèn)值

描述

acceleration

Boolean

true

設(shè)置硬件加速模式，用于觸摸設(shè)備此值必須是真的

autoCenter

Boolean

false

是否居中

display

String

single

single 單頁書，double 雙頁書

duration

Number

600

設(shè)置翻頁動(dòng)畫時(shí)間，單位：毫秒

gradients

Number

true

置翻頁時(shí)是否顯示翻頁跟陰影

height

Number

null

設(shè)置高度

page

Number

1

返回當(dāng)前頁數(shù)

pages

Number

Dom的頁數(shù)

頁碼總數(shù)

when

Object

{}

監(jiān)聽事件

width

Number

null

設(shè)置寬度

12.when常用監(jiān)聽事件

監(jiān)聽事件名

介紹

返回值

turning

翻頁前觸發(fā)

event--事件對(duì)象 整個(gè)動(dòng)畫書，

page-- 翻頁后的頁碼，

view-- 翻頁后的dom

turned

翻頁后觸發(fā)

event--事件對(duì)象

page-- 翻頁后的頁碼，

view-- 翻頁后的dom

start

頁面開始時(shí)觸發(fā)

event--事件對(duì)象

page-- 頁碼，

pageObject -- 頁面數(shù)據(jù)

end

頁面停止時(shí)觸發(fā)

event--事件對(duì)象

page-頁碼，

pageObject -- 頁面數(shù)據(jù)

first

第一頁觸發(fā)

event--事件對(duì)象

last

最后一頁觸發(fā)

event--事件對(duì)象

zooming

當(dāng)縮放改變時(shí)觸發(fā)此事件

event--事件對(duì)象

newFactor -- 新的縮放比例

current -- 當(dāng)前縮放比例

13.屬性

14.方法

方法名

參數(shù)1

參數(shù)2

描述

addPage

element

需要添加的dom元素

pageNumber

可選，你希望插入頁面的位置，默認(rèn)值為當(dāng)前的總頁數(shù)+1（最后一頁）

將頁面添加到動(dòng)畫書中

display

displayMode

display 的類型 single，double 默認(rèn)值為double

無

控制書是單頁書還是雙頁書

disable

disable （Boolean）

True表示禁用效果，false表示啟用

無

禁用和啟用效果。如果它被禁用，用戶將不能夠更改當(dāng)前頁面（效果，所有書頁不允許翻動(dòng)，鼠標(biāo)移動(dòng)到書角不會(huì)有翻頁動(dòng)畫）

destroy

$(‘#flipbook’).turn(‘destroy’); 只銷毀書頁，不銷毀容器

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

容器也銷毀

銷毀動(dòng)畫書。它將刪除DOM和內(nèi)存

hasPage

pageNumber

要查詢的是第幾頁

無

如果頁在內(nèi)存中，則返回true

next

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

無

將視圖轉(zhuǎn)到下一個(gè)視圖（翻到下一頁）

is

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

}

無

檢測(cè)選擇器是否有turn.js實(shí)例（檢查當(dāng)前選中的dom元素是否已經(jīng)轉(zhuǎn)化為動(dòng)畫書了）

page

page

需要跳轉(zhuǎn)到的界面

無

跳轉(zhuǎn)到指定界面

pages

pages

頁面總數(shù)

無

設(shè)置動(dòng)畫書的頁數(shù)。如果數(shù)字的頁面數(shù)小于當(dāng)前頁面數(shù)，它將刪除這些超出范圍的頁面

peel

corner

 可選值tl（左上）, tr（右上）, bl, br, r, l.

無

顯示一個(gè)剝落的角落--（展示一個(gè)書角的翻頁hover）

previous

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

無

將視圖轉(zhuǎn)換為上一個(gè)視圖-（跳轉(zhuǎn)到翻頁前的頁面）

range

pageNumber

范圍內(nèi)的頁碼。此參數(shù)

是可選的，默認(rèn)值是當(dāng)前的DOM上下標(biāo)

無

它返回一個(gè)由兩個(gè)值組成的數(shù)組，第一個(gè)數(shù)值表示當(dāng)切換到pageNumber頁時(shí)DOM中存在的第一頁的下標(biāo)，第二個(gè)數(shù)值表格DOM中存在的最后一頁的下標(biāo)，為了動(dòng)態(tài)添加新頁面，使用這個(gè)方法是必須的。

removePage

pageNumber

要?jiǎng)h除的頁碼數(shù)

無

從DOM中刪除頁面及其所有引用

resize

無

無

重新計(jì)算所有頁面的位置

size

width

寬度

height

高度

設(shè)置書的尺寸

stop

無

無

停止當(dāng)前動(dòng)畫。例如，可以直接跳轉(zhuǎn)到指定頁面，（不帶動(dòng)畫）

zoom

factor

倍數(shù)2能增大一倍 0.5則縮小一倍

duration

縮放動(dòng)畫持續(xù)時(shí)間（毫秒）默認(rèn)值為500

按比例縮書的大小

總結(jié)

到此這篇關(guān)于使用Turn.js實(shí)現(xiàn)翻書效果的文章就介紹到這了,更多相關(guān)Turn.js實(shí)現(xiàn)翻書效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論