使用Turn.js實現(xiàn)翻書效果的完整步驟
1 trun.js簡介
Turn.js是一個JavaScript庫，它集合了HTML5的所有優(yōu)點，可以使我們的內(nèi)容看起來像一本書或雜志，有真實的翻閱的效果。
它使用HTML5和CSS3來執(zhí)行效果，所以它可以在iOS設(shè)備（iPad，iPhone，iPod）和Android設(shè)備等觸摸設(shè)備上很好地工作~
Turn.js具有比Flash內(nèi)容擁有真實HTML內(nèi)容的所有優(yōu)勢，除了感覺到本機內(nèi)容（可選內(nèi)容，沒有第三方上下文菜單）之外，還可以添加廣告代碼，HTML5視頻，工具提示，圖像，地圖，表單，跟蹤每個頁面并將它們與數(shù)百個精巧的庫組合在一起用于網(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會報錯
安裝jQuery
vue.config.js中配置
項目中使用
4.trun.js準備HTML
Turn.js使用DOM元素作為所有頁面的容器。這DOM元素通常是書。有三種方法可以添加書頁。
（一） 直接添加
直接在容器中添加頁面。HTML包含所有書頁
（二）通過API動態(tài)添加
HTML僅包含容器，并且所有頁面都將是動態(tài)的通過Ajax請求獲取數(shù)據(jù)后添加
（三）兩者相結(jié)合
有時候最好是HTML中的一些頁面已經(jīng)加載然后動態(tài)加載的其他的界面
5.trun.js 情況
Turn.js可以處理很長的動畫書。也就是說不需要限制關(guān)于它可以包含的頁面數(shù)量。這是因為turn.js只在DOM中保留最后6頁，雖然會有對先前引用內(nèi)容進行再次加載，但是可以減少緩存以便于釋放存儲器。
6.IE8/7 支持
turn.js庫包括turn.html4.js，它針對IE 8進行了優(yōu)化以及任何其他不支持CSS3特性的瀏覽器比如變換。您可以使用CSS技巧來包含turn.html4.js適用于舊版本的IE，但建議使用Modernizr庫和資源加載器(如YepNope.js)可以在modernizr.com上找到。
7.CSS一覽
odd/even: 用來顯示設(shè)置為雙顯示時的奇數(shù)頁/偶數(shù)頁
fixed ：指示不從DOM中刪除頁面即使頁面超出了范圍
hard：設(shè)置頁面的硬過渡效果。通過將所有頁面設(shè)置為硬頁面
p[0-9]+ ：此類描述特定頁面。例如，.p1表示到第一頁、.p2到第二頁，依此類推。您可以在中更改頁碼，無論其順序如何
shadow：描述了動畫書的可見區(qū)域。它圍繞著活頁夾，所以適合做陰影
sheet：使頁面看起來像一張紙。這是所有頁面的默認樣式
8.控制書的大小
有三種方法可以控制書的大小
8.1 使用css
8.2 使用屬性
8.3 使用size方法
9.display屬性
該顯示定義了動畫書中可見的頁面數(shù)量。在iPad或iPhone上使用turn.js時，會有一些如果設(shè)備的方向是縱向的，翻頁會出現(xiàn)問題。因此，turn.js引入了一個名為single的新視圖。那里有兩個視圖：double，顯示兩個頁面；single，顯示僅顯示一頁
10.ignoring屬性
Turn.js中的元素會保留一個名為ignore的HTML屬性，該屬性可以添加對于動畫書中的某些元素，不要將它們選為頁面。
ignore標記的頁面在display ：‘double’時會展示在左側(cè)第一頁
dispaly：single 時正常展示
11.構(gòu)造器
構(gòu)造函數(shù)是將容器轉(zhuǎn)換為書。為turn.js使用一個實例，所以沒有必要對其進行外部引用，注意構(gòu)造函數(shù)只有一個名為options的參數(shù)而且它是可選的
options可選參數(shù)
選項 | 類型 | 默認值 | 描述 |
acceleration | Boolean | true | 設(shè)置硬件加速模式，用于觸摸設(shè)備此值必須是真的 |
autoCenter | Boolean | false | 是否居中 |
display | String | single | single 單頁書，double 雙頁書 |
duration | Number | 600 | 設(shè)置翻頁動畫時間，單位：毫秒 |
gradients | Number | true | 置翻頁時是否顯示翻頁跟陰影 |
height | Number | null | 設(shè)置高度 |
page | Number | 1 | 返回當前頁數(shù) |
pages | Number | Dom的頁數(shù) | 頁碼總數(shù) |
when | Object | {} | 監(jiān)聽事件 |
width | Number | null | 設(shè)置寬度 |
12.when常用監(jiān)聽事件
監(jiān)聽事件名 | 介紹 | 返回值 |
turning | 翻頁前觸發(fā) | event--事件對象 整個動畫書， page-- 翻頁后的頁碼， view-- 翻頁后的dom |
turned | 翻頁后觸發(fā) | event--事件對象 page-- 翻頁后的頁碼， view-- 翻頁后的dom |
start | 頁面開始時觸發(fā) | event--事件對象 page-- 頁碼， pageObject -- 頁面數(shù)據(jù) |
end | 頁面停止時觸發(fā) | event--事件對象 page-頁碼， pageObject -- 頁面數(shù)據(jù) |
first | 第一頁觸發(fā) | event--事件對象 |
last | 最后一頁觸發(fā) | event--事件對象 |
zooming | 當縮放改變時觸發(fā)此事件 | event--事件對象 newFactor -- 新的縮放比例 current -- 當前縮放比例 |
13.屬性
14.方法
方法名 | 參數(shù)1 | 參數(shù)2 | 描述 |
addPage | element 需要添加的dom元素 | pageNumber 可選，你希望插入頁面的位置，默認值為當前的總頁數(shù)+1（最后一頁） | 將頁面添加到動畫書中 |
display | displayMode display 的類型 single，double 默認值為double | 無 | 控制書是單頁書還是雙頁書 |
disable | disable （Boolean） True表示禁用效果，false表示啟用 | 無 | 禁用和啟用效果。如果它被禁用，用戶將不能夠更改當前頁面（效果，所有書頁不允許翻動，鼠標移動到書角不會有翻頁動畫） |
destroy | $(‘#flipbook’).turn(‘destroy’); 只銷毀書頁，不銷毀容器 | $(‘#flipbook’).turn(‘destroy’).remove(); 容器也銷毀 | 銷毀動畫書。它將刪除DOM和內(nèi)存 |
hasPage | pageNumber 要查詢的是第幾頁 | 無 | 如果頁在內(nèi)存中，則返回true |
next | $(‘#flipbook’).turn(‘next’); | 無 | 將視圖轉(zhuǎn)到下一個視圖（翻到下一頁） |
is | if (!$(‘#flipbook’).turn(‘is’)) { $(‘#flipbook’).turn(); } | 無 | 檢測選擇器是否有turn.js實例（檢查當前選中的dom元素是否已經(jīng)轉(zhuǎn)化為動畫書了） |
page | page 需要跳轉(zhuǎn)到的界面 | 無 | 跳轉(zhuǎn)到指定界面 |
pages | pages 頁面總數(shù) | 無 | 設(shè)置動畫書的頁數(shù)。如果數(shù)字的頁面數(shù)小于當前頁面數(shù)，它將刪除這些超出范圍的頁面 |
peel | corner 可選值tl（左上）, tr（右上）, bl, br, r, l. | 無 | 顯示一個剝落的角落--（展示一個書角的翻頁hover） |
previous | $(‘#flipbook’).turn(‘previous’ | 無 | 將視圖轉(zhuǎn)換為上一個視圖-（跳轉(zhuǎn)到翻頁前的頁面） |
range | pageNumber 范圍內(nèi)的頁碼。此參數(shù) 是可選的，默認值是當前的DOM上下標 | 無 | 它返回一個由兩個值組成的數(shù)組，第一個數(shù)值表示當切換到pageNumber頁時DOM中存在的第一頁的下標，第二個數(shù)值表格DOM中存在的最后一頁的下標，為了動態(tài)添加新頁面，使用這個方法是必須的。 |
removePage | pageNumber 要刪除的頁碼數(shù) | 無 | 從DOM中刪除頁面及其所有引用 |
resize | 無 | 無 | 重新計算所有頁面的位置 |
size | width 寬度 | height 高度 | 設(shè)置書的尺寸 |
stop | 無 | 無 | 停止當前動畫。例如，可以直接跳轉(zhuǎn)到指定頁面，（不帶動畫） |
zoom | factor 倍數(shù)2能增大一倍 0.5則縮小一倍 | duration 縮放動畫持續(xù)時間（毫秒）默認值為500 | 按比例縮書的大小 |
總結(jié)
到此這篇關(guān)于使用Turn.js實現(xiàn)翻書效果的文章就介紹到這了,更多相關(guān)Turn.js實現(xiàn)翻書效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了解決JS表單驗證只有第一個IF起作用的問題，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-12-12
eval函數(shù)在js中有不少用處了，下面我來給各位朋友介紹eval解析json的實例，基于這個實例我們引出來在eval處理json數(shù)據(jù)時的一些注意事項，希望文章對各位同學會有所幫助2014-01-01
JavaScript判斷表單提交時哪個radio按鈕被選中的方法
這篇文章主要介紹了JavaScript判斷表單提交時哪個radio按鈕被選中的方法,實例分析了javascript操作表單radio按鈕的技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
做前端或者js程序員的同學應該都有感受，在日常工作中，用的最多的功能，一個是ajax與后臺的數(shù)據(jù)接口，另一個就是對Dom元素的style控制，來達到不同的變換效果。2010-10-10
這篇文章主要介紹了JavaScript的API設(shè)計原則，包括接口的流暢性，一致性，參數(shù)的處理，可擴展性，對錯誤的處理，可預見性，注釋和文檔的可讀性，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起學習吧2016-06-06
javascript框架設(shè)計讀書筆記之模塊加載系統(tǒng)
本文是司徒正美的《javascript框架設(shè)計》的第二章模塊加載系統(tǒng)的讀書筆記，根據(jù)自己的理解，簡要的跟大家講述了本章的主要內(nèi)容，方便大家更好的學習。2014-12-12
在多姿多彩的JavaScript世界,Polyfill如同一座架在瀏覽器兼容性鴻溝之上的橋梁,本文將介紹常見的JavaScript Polyfill兼容方案,并舉例說明它們的應用,需要的可以參考下2023-12-12
Fullpage.js固定導航欄-實現(xiàn)定位導航欄
FullPage.js 是一個簡單而易于使用的插件，用來創(chuàng)建全屏滾動網(wǎng)站（也被稱為單頁網(wǎng)站）。接下來通過本文給大家介紹Fullpage.js固定導航欄-實現(xiàn)定位導航欄，對fullpage.js導航欄相關(guān)知識感興趣的朋友一起學習吧2016-03-03
這篇文章主要為大家詳細介紹了js實現(xiàn)短信發(fā)送倒計時功能，包含正則驗證，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
javascript獲取ckeditor編輯器的值(實現(xiàn)代碼)
這篇文章主要介紹了javascript獲取ckeditor編輯器的值，用于表單驗證。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11