使用Turn.js實(shí)現(xiàn)翻書(shū)效果的完整步驟
1 trun.js簡(jiǎn)介
Turn.js是一個(gè)JavaScript庫(kù),它集合了HTML5的所有優(yōu)點(diǎn),可以使我們的內(nèi)容看起來(lái)像一本書(shū)或雜志,有真實(shí)的翻閱的效果。
它使用HTML5和CSS3來(lái)執(zhí)行效果,所以它可以在iOS設(shè)備(iPad,iPhone,iPod)和Android設(shè)備等觸摸設(shè)備上很好地工作~
Turn.js具有比Flash內(nèi)容擁有真實(shí)HTML內(nèi)容的所有優(yōu)勢(shì),除了感覺(jué)到本機(jī)內(nèi)容(可選內(nèi)容,沒(méi)有第三方上下文菜單)之外,還可以添加廣告代碼,HTML5視頻,工具提示,圖像,地圖,表單,跟蹤每個(gè)頁(yè)面并將它們與數(shù)百個(gè)精巧的庫(kù)組合在一起用于網(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元素作為所有頁(yè)面的容器。這DOM元素通常是書(shū)。有三種方法可以添加書(shū)頁(yè)。
(一) 直接添加
直接在容器中添加頁(yè)面。HTML包含所有書(shū)頁(yè)
(二)通過(guò)API動(dòng)態(tài)添加
HTML僅包含容器,并且所有頁(yè)面都將是動(dòng)態(tài)的通過(guò)Ajax請(qǐng)求獲取數(shù)據(jù)后添加
(三)兩者相結(jié)合
有時(shí)候最好是HTML中的一些頁(yè)面已經(jīng)加載然后動(dòng)態(tài)加載的其他的界面
5.trun.js 情況
Turn.js可以處理很長(zhǎng)的動(dòng)畫(huà)書(shū)。也就是說(shuō)不需要限制關(guān)于它可以包含的頁(yè)面數(shù)量。這是因?yàn)閠urn.js只在DOM中保留最后6頁(yè),雖然會(huì)有對(duì)先前引用內(nèi)容進(jìn)行再次加載,但是可以減少緩存以便于釋放存儲(chǔ)器。
6.IE8/7 支持
turn.js庫(kù)包括turn.html4.js,它針對(duì)IE 8進(jìn)行了優(yōu)化以及任何其他不支持CSS3特性的瀏覽器比如變換。您可以使用CSS技巧來(lái)包含turn.html4.js適用于舊版本的IE,但建議使用Modernizr庫(kù)和資源加載器(如YepNope.js)可以在modernizr.com上找到。
7.CSS一覽
odd/even: 用來(lái)顯示設(shè)置為雙顯示時(shí)的奇數(shù)頁(yè)/偶數(shù)頁(yè)
fixed :指示不從DOM中刪除頁(yè)面即使頁(yè)面超出了范圍
hard:設(shè)置頁(yè)面的硬過(guò)渡效果。通過(guò)將所有頁(yè)面設(shè)置為硬頁(yè)面
p[0-9]+ :此類(lèi)描述特定頁(yè)面。例如,.p1表示到第一頁(yè)、.p2到第二頁(yè),依此類(lèi)推。您可以在中更改頁(yè)碼,無(wú)論其順序如何
shadow:描述了動(dòng)畫(huà)書(shū)的可見(jiàn)區(qū)域。它圍繞著活頁(yè)夾,所以適合做陰影
sheet:使頁(yè)面看起來(lái)像一張紙。這是所有頁(yè)面的默認(rèn)樣式
8.控制書(shū)的大小
有三種方法可以控制書(shū)的大小
8.1 使用css
8.2 使用屬性
8.3 使用size方法
9.display屬性
該顯示定義了動(dòng)畫(huà)書(shū)中可見(jiàn)的頁(yè)面數(shù)量。在iPad或iPhone上使用turn.js時(shí),會(huì)有一些如果設(shè)備的方向是縱向的,翻頁(yè)會(huì)出現(xiàn)問(wèn)題。因此,turn.js引入了一個(gè)名為single的新視圖。那里有兩個(gè)視圖:double,顯示兩個(gè)頁(yè)面;single,顯示僅顯示一頁(yè)
10.ignoring屬性
Turn.js中的元素會(huì)保留一個(gè)名為ignore的HTML屬性,該屬性可以添加對(duì)于動(dòng)畫(huà)書(shū)中的某些元素,不要將它們選為頁(yè)面。
ignore標(biāo)記的頁(yè)面在display :‘double’時(shí)會(huì)展示在左側(cè)第一頁(yè)
dispaly:single 時(shí)正常展示
11.構(gòu)造器
構(gòu)造函數(shù)是將容器轉(zhuǎn)換為書(shū)。為turn.js使用一個(gè)實(shí)例,所以沒(méi)有必要對(duì)其進(jìn)行外部引用,注意構(gòu)造函數(shù)只有一個(gè)名為options的參數(shù)而且它是可選的
options可選參數(shù)
選項(xiàng) | 類(lèi)型 | 默認(rèn)值 | 描述 |
acceleration | Boolean | true | 設(shè)置硬件加速模式,用于觸摸設(shè)備此值必須是真的 |
autoCenter | Boolean | false | 是否居中 |
display | String | single | single 單頁(yè)書(shū),double 雙頁(yè)書(shū) |
duration | Number | 600 | 設(shè)置翻頁(yè)動(dòng)畫(huà)時(shí)間,單位:毫秒 |
gradients | Number | true | 置翻頁(yè)時(shí)是否顯示翻頁(yè)跟陰影 |
height | Number | null | 設(shè)置高度 |
page | Number | 1 | 返回當(dāng)前頁(yè)數(shù) |
pages | Number | Dom的頁(yè)數(shù) | 頁(yè)碼總數(shù) |
when | Object | {} | 監(jiān)聽(tīng)事件 |
width | Number | null | 設(shè)置寬度 |
12.when常用監(jiān)聽(tīng)事件
監(jiān)聽(tīng)事件名 | 介紹 | 返回值 |
turning | 翻頁(yè)前觸發(fā) | event--事件對(duì)象 整個(gè)動(dòng)畫(huà)書(shū), page-- 翻頁(yè)后的頁(yè)碼, view-- 翻頁(yè)后的dom |
turned | 翻頁(yè)后觸發(fā) | event--事件對(duì)象 page-- 翻頁(yè)后的頁(yè)碼, view-- 翻頁(yè)后的dom |
start | 頁(yè)面開(kāi)始時(shí)觸發(fā) | event--事件對(duì)象 page-- 頁(yè)碼, pageObject -- 頁(yè)面數(shù)據(jù) |
end | 頁(yè)面停止時(shí)觸發(fā) | event--事件對(duì)象 page-頁(yè)碼, pageObject -- 頁(yè)面數(shù)據(jù) |
first | 第一頁(yè)觸發(fā) | event--事件對(duì)象 |
last | 最后一頁(yè)觸發(fā) | event--事件對(duì)象 |
zooming | 當(dāng)縮放改變時(shí)觸發(fā)此事件 | event--事件對(duì)象 newFactor -- 新的縮放比例 current -- 當(dāng)前縮放比例 |
13.屬性
14.方法
方法名 | 參數(shù)1 | 參數(shù)2 | 描述 |
addPage | element 需要添加的dom元素 | pageNumber 可選,你希望插入頁(yè)面的位置,默認(rèn)值為當(dāng)前的總頁(yè)數(shù)+1(最后一頁(yè)) | 將頁(yè)面添加到動(dòng)畫(huà)書(shū)中 |
display | displayMode display 的類(lèi)型 single,double 默認(rèn)值為double | 無(wú) | 控制書(shū)是單頁(yè)書(shū)還是雙頁(yè)書(shū) |
disable | disable (Boolean) True表示禁用效果,false表示啟用 | 無(wú) | 禁用和啟用效果。如果它被禁用,用戶將不能夠更改當(dāng)前頁(yè)面(效果,所有書(shū)頁(yè)不允許翻動(dòng),鼠標(biāo)移動(dòng)到書(shū)角不會(huì)有翻頁(yè)動(dòng)畫(huà)) |
destroy | $(‘#flipbook’).turn(‘destroy’); 只銷(xiāo)毀書(shū)頁(yè),不銷(xiāo)毀容器 | $(‘#flipbook’).turn(‘destroy’).remove(); 容器也銷(xiāo)毀 | 銷(xiāo)毀動(dòng)畫(huà)書(shū)。它將刪除DOM和內(nèi)存 |
hasPage | pageNumber 要查詢的是第幾頁(yè) | 無(wú) | 如果頁(yè)在內(nèi)存中,則返回true |
next | $(‘#flipbook’).turn(‘next’); | 無(wú) | 將視圖轉(zhuǎn)到下一個(gè)視圖(翻到下一頁(yè)) |
is | if (!$(‘#flipbook’).turn(‘is’)) { $(‘#flipbook’).turn(); } | 無(wú) | 檢測(cè)選擇器是否有turn.js實(shí)例(檢查當(dāng)前選中的dom元素是否已經(jīng)轉(zhuǎn)化為動(dòng)畫(huà)書(shū)了) |
page | page 需要跳轉(zhuǎn)到的界面 | 無(wú) | 跳轉(zhuǎn)到指定界面 |
pages | pages 頁(yè)面總數(shù) | 無(wú) | 設(shè)置動(dòng)畫(huà)書(shū)的頁(yè)數(shù)。如果數(shù)字的頁(yè)面數(shù)小于當(dāng)前頁(yè)面數(shù),它將刪除這些超出范圍的頁(yè)面 |
peel | corner 可選值tl(左上), tr(右上), bl, br, r, l. | 無(wú) | 顯示一個(gè)剝落的角落--(展示一個(gè)書(shū)角的翻頁(yè)hover) |
previous | $(‘#flipbook’).turn(‘previous’ | 無(wú) | 將視圖轉(zhuǎn)換為上一個(gè)視圖-(跳轉(zhuǎn)到翻頁(yè)前的頁(yè)面) |
range | pageNumber 范圍內(nèi)的頁(yè)碼。此參數(shù) 是可選的,默認(rèn)值是當(dāng)前的DOM上下標(biāo) | 無(wú) | 它返回一個(gè)由兩個(gè)值組成的數(shù)組,第一個(gè)數(shù)值表示當(dāng)切換到pageNumber頁(yè)時(shí)DOM中存在的第一頁(yè)的下標(biāo),第二個(gè)數(shù)值表格DOM中存在的最后一頁(yè)的下標(biāo),為了動(dòng)態(tài)添加新頁(yè)面,使用這個(gè)方法是必須的。 |
removePage | pageNumber 要?jiǎng)h除的頁(yè)碼數(shù) | 無(wú) | 從DOM中刪除頁(yè)面及其所有引用 |
resize | 無(wú) | 無(wú) | 重新計(jì)算所有頁(yè)面的位置 |
size | width 寬度 | height 高度 | 設(shè)置書(shū)的尺寸 |
stop | 無(wú) | 無(wú) | 停止當(dāng)前動(dòng)畫(huà)。例如,可以直接跳轉(zhuǎn)到指定頁(yè)面,(不帶動(dòng)畫(huà)) |
zoom | factor 倍數(shù)2能增大一倍 0.5則縮小一倍 | duration 縮放動(dòng)畫(huà)持續(xù)時(shí)間(毫秒)默認(rèn)值為500 | 按比例縮書(shū)的大小 |
總結(jié)
到此這篇關(guān)于使用Turn.js實(shí)現(xiàn)翻書(shū)效果的文章就介紹到這了,更多相關(guān)Turn.js實(shí)現(xiàn)翻書(shū)效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
原生JS檢測(cè)CSS3動(dòng)畫(huà)是否結(jié)束的方法詳解
這篇文章主要介紹了原生JS檢測(cè)CSS3動(dòng)畫(huà)是否結(jié)束的方法,結(jié)合實(shí)例形式分析了javascript事件響應(yīng)及針對(duì)css3屬性檢測(cè)相關(guān)操作技巧,需要的朋友可以參考下2019-01-01JavaScript實(shí)現(xiàn)文字與圖片拖拽效果的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)文字與圖片拖拽效果的方法,涉及javascript操作文字與圖片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02javascript 字符 Escape,encodeURI,encodeURIComponent
下面是對(duì)字符串編碼轉(zhuǎn)換功能函數(shù)大家,大家可以根據(jù)實(shí)際需要選擇使用。2009-07-07Javascript數(shù)組操作函數(shù)總結(jié)
這篇文章主要給大家匯總介紹了Javascript數(shù)組操作函數(shù),需要的朋友可以參考下2015-02-02js html css實(shí)現(xiàn)復(fù)選框全選與反選
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)復(fù)選框全選與反選,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10基于JS實(shí)現(xiàn)帶動(dòng)畫(huà)效果的流程進(jìn)度條
當(dāng)在使用流程的時(shí)候,比如有一個(gè)審核流程,有三個(gè)階段:開(kāi)始,審核中,審核成功。當(dāng)在不同的階段,做相應(yīng)的進(jìn)度顯示,當(dāng)顯示時(shí),是以動(dòng)畫(huà)的形式顯示的。下面通過(guò)代碼給大家介紹JS實(shí)現(xiàn)帶動(dòng)畫(huà)效果的流程進(jìn)度條,感興趣的朋友一起看看吧2018-06-06