本篇內(nèi)容主要講解“怎么用jQuery插件Turn.js實現(xiàn)移動端電子書翻頁效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“怎么用jQuery插件Turn.js實現(xiàn)移動端電子書翻頁效果”吧!

成都創(chuàng)新互聯(lián)自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站設(shè)計制作、成都做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元天涯做網(wǎng)站,已為上家服務(wù),為天涯各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792

先來看一下效果：

關(guān)于Turn.js

它是一個輕量級的 (15kb) jQuery/html5 插件用來創(chuàng)建類似書本和雜志翻頁效果，支持觸摸屏設(shè)備。Turn.js 支持硬件加速來讓翻頁效果更加平滑。

特征：

• 適用于 iPad 和 iPhone。

• 簡單、美觀且功能強大的 API。

• 允許通過 Ajax 請求動態(tài)加載頁面。

• 純 HTML5/CSS3 內(nèi)容。

• 兩種過渡效果。

• 適用于舊瀏覽器，例如帶有 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)建一個容器元素和一些代表頁碼的子元素，為其設(shè)置合適的寬高，隨便輸入一點內(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, // 是否啟動硬件加速 如果為觸摸設(shè)備必須為true
    pages: 11, // 頁碼總數(shù)
    elevation: 50, // 轉(zhuǎn)換期間頁面的高度
    width: 300, // 寬度 單位 px
    height: 800, // 高度 單位 px
    gradients: true, // 是否顯示翻頁陰影效果
    display: 'single', //設(shè)置單頁還是雙頁
    when: {
	// 翻頁前觸發(fā)
	turning: function (e, page, view) {
	                    
	},
	// 翻頁后觸發(fā)
	turned: function (e, page) {
				
        }
    }
});

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

3.1 turn常用配置項

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

3.3 turn 常用方法

項目實現(xiàn)

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

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

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

拓展

項目中用到兩個js插件 簡單介紹一下

Modernizr.js

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

yeponpe.js

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

到此，相信大家對“怎么用jQuery插件Turn.js實現(xiàn)移動端電子書翻頁效果”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

分享標(biāo)題：怎么用jQuery插件Turn.js實現(xiàn)移動端電子書翻頁效果
文章轉(zhuǎn)載：http://m.newbst.com/article16/jeejgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、搜索引擎優(yōu)化、ChatGPT、云服務(wù)器、網(wǎng)站改版、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)