樓建忠

摘要： 隨著社會與經(jīng)濟的高速發(fā)展，手機已經(jīng)成為了人們生活和工作中一件必不可少的工具。移動端的電子書應運而生，本文主要以，電子書的形式來展示多種現(xiàn)在主流的頁面翻頁效果，并使用HTML5標準規(guī)范，實現(xiàn)移動端網(wǎng)頁內容切換的效果。

關鍵詞：HTML5；翻頁效果；移動端

引言

電子書以Dreamweaver 作為編譯制作軟件進行設計與制作，以jQuery， Modernizr和turn庫作為主要框架、JavaScript程序、 Html5 標記語言，并使用HTML5標準規(guī)范，實現(xiàn)移動端網(wǎng)頁內容翻頁效果，方便在手機上瀏覽。

一、電子書風格

電子書采用黃褐色的冷色調，突出一種孤獨與冷靜之感，讓人更加容易感受作者的心境，與書的思想。電子書主體高度也就是里面內容的圖片高度為640px，寬度為100%比例，主體設置為自適應。

二、JavaScript 庫的使用

為了方便設計我們首先要做的就是引入相關的庫，首先引入的是jQuery庫，它是一個快速、簡潔的JavaScript框架，然后引入Modernizr 庫，它是一個用來檢測瀏覽器功能支持情況的 JavaScript 庫。通過這個庫我們可以檢測不同的瀏覽器對于HTML5特性的支持情況。相關代碼如下：

三、手機檢測與自適應

考慮到手機平臺和瀏覽器的多樣性，要能區(qū)分出是安卓手機還是蘋果手機，并做出不同的處理，我們可以在網(wǎng)頁頭中加入以下代碼

然后在加載函數(shù)中實現(xiàn)手機檢測與自適應，代碼如下：

window.onload = function （） {

//alert（$（window）.height（））；

var u = navigator.userAgent；

if （u.indexOf（'Android'） > -1 || u.indexOf（'Linux'） > -1） {//安卓手機

} else if （u.indexOf（'iPhone'） > -1） {//蘋果手機

//屏蔽ios下上下彈性

$（window）.on（'scroll.elasticity'， function （e） {

e.preventDefault（）；

}）.on（'touchmove.elasticity'， function （e） {

e.preventDefault（）；

}）；

} else if （u.indexOf（'Windows Phone'） > -1） {//winphone手機

}

四、翻書效果的實現(xiàn)

仿真翻書效果，盡可能達到平時我們在翻紙質書時翻書效果，極大的模擬我們平常各種翻書情景，使我們在閱讀電子書時給我們一種身臨其境的感覺，也能有效的避免在閱讀時給人一種生硬的感覺，更加符合用戶的體驗需求翻頁效果的實現(xiàn)。我們可以引入一個很流行的js庫叫做Turn.js，它可以大加快我們的制作效率，要使用turn.js來實現(xiàn)翻頁效果，首先要做的是配置turn.js，告訴turn.js頁面的寬、高和頁數(shù)等信息。首先，在網(wǎng)頁body主體中添加以下標簽

然后，配置電子書的寬高為屏幕寬高

var w = $（window）.width（）；

var h = $（window）.height（）；

$（'.flipboox'）.width（w）.height（h）；

當網(wǎng)頁大小變化時同樣改變電子書大小

$（window）.resize（function （） {

w = $（window）.width（）；

h = $（window）.height（）；

$（'.flipboox'）.width（w）.height（h）；endprint

}）；

最終實現(xiàn)翻頁效果代碼如下：

$（'.flipbook'）.turn（{

width： w， // Width

height： h， // Height

elevation： ，

display： 'single'，

gradients： true，

autoCenter： true，

when： {

turning： function （e， page， view） {

if （page == ） {

$（".btnImg"）.css（"display"， "none"）；

$（".mark"）.css（"display"， "block"）；

} else {

$（".btnImg"）.css（"display"， "block"）；

$（".mark"）.css（"display"， "none"）；}

if （page == 41） {

$（".nextPage"）.css（"display"， "none"）；} else {

$（".nextPage"）.css（"display"， "block"）；

}}，

}}）}

yepnope（{

test： Modernizr.csstransforms，

yep： ['js/turn.js']，

complete： loadApp

}）；}；

至此電子書就完成了，最終效果發(fā)下：

結束語

使用Html5進行電子書制作的關鍵在于靈活使用流行的js庫，使用得當可以輕易實現(xiàn)各種華麗的功能。

參考文獻：

[1]于海娟. 論H5在新媒體中的應用[J]. 新聞論壇，2016，（04）：86-87

[2]陳婉凌. HTML5+CSS3+jQuery Mobile輕松構造APP與移動網(wǎng)站[D]. 清華大學出版社.2015.01endprint