怎么實(shí)現(xiàn)一個(gè)炫酷的翻書效果？下面本篇文章給大家分享一個(gè)jQuery插件–Turn.js，介紹一下怎么用Turn.js 實(shí)現(xiàn)移動(dòng)端電子書翻頁(yè)項(xiàng)目，希望對(duì)大家有所幫助！

先來(lái)看一下效果：

前端（vue）入門到精通課程，老師在線輔導(dǎo)：聯(lián)系老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用

關(guān)于Turn.js

它是一個(gè)輕量級(jí)的 (15kb) jQuery/html5 插件用來(lái)創(chuàng)建類似書本和雜志翻頁(yè)效果，支持觸摸屏設(shè)備。Turn.js 支持硬件加速來(lái)讓翻頁(yè)效果更加平滑。【推薦學(xué)習(xí)：jQuery視頻教程、web前端視頻】

特征：

• 適用于 iPad 和 iPhone。
• 簡(jiǎn)單、美觀且功能強(qiáng)大的 API。
• 允許通過(guò) Ajax 請(qǐng)求動(dòng)態(tài)加載頁(yè)面。
• 純 HTML5/CSS3 內(nèi)容。
• 兩種過(guò)渡效果。
• 適用于舊瀏覽器，例如帶有 turn.html4.js 的 IE 8

turn.js的基本使用

1 引入turn.js

Turn.js依賴于jQuery,首先script標(biāo)簽引入jQuery，和turn.js，jQuery 要求 1.3 或更高版本。

turn.js 可前往官網(wǎng)下載

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/turn.js"></script>

2 創(chuàng)建html和css

創(chuàng)建一個(gè)容器元素和一些代表頁(yè)碼的子元素，為其設(shè)置合適的寬高，隨便輸入一點(diǎn)內(nèi)容

<div id="flipbook">     <div class="page"></div>     <div class="page"></div>     <div class="page"></div>     <div class="page"></div> </div>

3 基本用法

$('#flipbook').turn({     acceleration: true, // 是否啟動(dòng)硬件加速 如果為觸摸設(shè)備必須為true     pages: 11, // 頁(yè)碼總數(shù)     elevation: 50, // 轉(zhuǎn)換期間頁(yè)面的高度     width: 300, // 寬度 單位 px     height: 800, // 高度 單位 px     gradients: true, // 是否顯示翻頁(yè)陰影效果     display: 'single', //設(shè)置單頁(yè)還是雙頁(yè)     when: { 	// 翻頁(yè)前觸發(fā) 	turning: function (e, page, view) { 	                     	}, 	// 翻頁(yè)后觸發(fā) 	turned: function (e, page) { 				         }     } });

這樣就可以實(shí)現(xiàn)基本的翻頁(yè)效果了

3.1 turn常用配置項(xiàng)

3.2 when 常用監(jiān)聽(tīng)事件

3.3 turn 常用方法

項(xiàng)目實(shí)現(xiàn)

項(xiàng)目有30p，每一p都對(duì)應(yīng)一張圖片，一頁(yè)一頁(yè)搭建實(shí)在太慢了，用js創(chuàng)建

封裝一個(gè)turn.js基本配置的函數(shù)，根據(jù)api實(shí)現(xiàn)自己的翻頁(yè)效果

一進(jìn)來(lái)調(diào)用創(chuàng)建函數(shù)，構(gòu)建頁(yè)面，判斷當(dāng)前瀏覽器環(huán)境是否支持 csstransforms 特性，支持 調(diào)用 turn.js 調(diào)用完畢后 執(zhí)行 turn.js 基本配置函數(shù)

拓展

項(xiàng)目中用到兩個(gè)js插件 簡(jiǎn)單介紹一下

Modernizr.js

傳統(tǒng)瀏覽器目前不會(huì)被完全取代，令你難以將最新的 CSS3 或 HTML5 功能嵌入你的網(wǎng)站。 Modernizr 正是為解決這一難題應(yīng)運(yùn)而生，作為一個(gè)開(kāi)源的 JavaScript 庫(kù)，Modernizr 檢測(cè)瀏覽器對(duì) CSS3 或 HTML5 功能支持情況。

yeponpe.js

yepnope.js是一個(gè)能夠根據(jù)輸入條件來(lái)選擇性異步加載資源文件的js腳本，可以在頁(yè)面上僅加載用戶需要的js/css。