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

怎麼實現一個酷炫的翻書效果？以下這篇文章跟大家分享一個jQuery外掛程式--Turn.js，介紹一下怎麼用Turn.js 實現行動裝置電子書翻頁項目，希望對大家有幫助！

先來看看效果：

關於Turn.js

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

#特徵：

• 適用於 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) {
				
        }
    }
});

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

3.1 turn常用設定項

#3.2 when 常用監聽事件

#3.3 turn 常用方法

專案實作

專案有30p，每p都對應一張圖片，一頁一頁搭建實在太慢了，用js創建

#封裝一個turn.js基本配置的函數，根據api實作自己的翻頁效果

一進來呼叫建立函數，建立頁面，判斷目前瀏覽器環境是否支援csstransforms 特性，支援呼叫turn.js 調用完畢後來執行turn.js 基本配置函數

拓展

##專案中用到兩個js外掛簡單介紹一下

Modernizr.js

傳統瀏覽器目前不會被完全取代，讓你難以將最新的CSS3 或HTML5 功能嵌入你的網站。

Modernizr 正是為解決這個難題應運而生，作為一個開源的 JavaScript 函式庫，Modernizr 偵測瀏覽器對 CSS3 或 HTML5 功能支援情況。

yeponpe.js

yepnope.js是一個能夠根據輸入條件來選擇性非同步載入資源檔案的js腳本，可以在頁面上僅載入使用者需要的js/css。

更多程式相關知識，請造訪：

程式設計教學！ ！

以上是jQuery外掛分享：Turn.js實作一個行動端電子書翻頁效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！