jQuery外掛分享：Turn.js實現一個行動端電子書翻頁效果

怎麼實現一個炫酷的翻書效果？下面本篇文章給大家分享一個外掛--Turn.js，介紹一下怎麼用Turn.js 實現行動端電子書翻頁專案，希望對大家有所幫助！

先來看一下效果：

前端（vue）入門到精通課程，老師線上輔導：聯絡老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

關於Turn.js

它是一個輕量級的 (15kb) jQuery/html5 外掛用來建立類似書本和雜誌翻頁效果，支援觸控式螢幕裝置。Turn.js 支援硬體加速來讓翻頁效果更加平滑。【推薦學習：、】

特徵：

適用於 iPad 和 iPhone。
簡單、美觀且功能強大的 API。
允許通過 Ajax 請求動態載入頁面。
純 HTML5/CSS3 內容。
兩種過渡效果。
適用於舊瀏覽器，例如帶有 turn.html4.js 的 IE 8

turn.js的基本使用

1 引入turn.js

Turn.js依賴於jQuery,首先script標籤引入jQuery，和turn.js，jQuery 要求 1.3 或更高版本。

turn.js 可前往下載

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/turn.js"></script>
登入後複製

2 建立html和css

建立一個容器元素和一些代表頁碼的子元素，為其設定合適的寬高，隨便輸入一點內容

<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, // 是否啟動硬體加速 如果為觸控裝置必須為true
    pages: 11, // 頁碼總數
    elevation: 50, // 轉換期間頁面的高度
    width: 300, // 寬度 單位 px
    height: 800, // 高度 單位 px
    gradients: true, // 是否顯示翻頁陰影效果
    display: 'single', //設定單頁還是雙頁
    when: {
	// 翻頁前觸發
	turning: function (e, page, view) {
	                    
	},
	// 翻頁後觸發
	turned: function (e, page) {
				
        }
    }
});
登入後複製

這樣就可以實現基本的翻頁效果了