基于HTML5的電子書(shū)效果制作

樓建忠

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

關(guān)鍵詞：HTML5；翻頁(yè)效果；移動(dòng)端

引言

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

一、電子書(shū)風(fēng)格

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

二、JavaScript 庫(kù)的使用

為了方便設(shè)計(jì)我們首先要做的就是引入相關(guān)的庫(kù)，首先引入的是jQuery庫(kù)，它是一個(gè)快速、簡(jiǎn)潔的JavaScript框架，然后引入Modernizr 庫(kù)，它是一個(gè)用來(lái)檢測(cè)瀏覽器功能支持情況的 JavaScript 庫(kù)。通過(guò)這個(gè)庫(kù)我們可以檢測(cè)不同的瀏覽器對(duì)于HTML5特性的支持情況。相關(guān)代碼如下：

三、手機(jī)檢測(cè)與自適應(yīng)

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

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

window.onload = function （） {

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

var u = navigator.userAgent；

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

} else if （u.indexOf（'iPhone'） > -1） {//蘋(píng)果手機(jī)

//屏蔽ios下上下彈性

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

e.preventDefault（）；

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

e.preventDefault（）；

}）；

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

}

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

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

然后，配置電子書(shū)的寬高為屏幕寬高

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

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

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

當(dāng)網(wǎng)頁(yè)大小變化時(shí)同樣改變電子書(shū)大小

$（window）.resize（function （） {

w = $（window）.width（）；

h = $（window）.height（）；

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

}）；

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

$（'.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

}）；}；

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

結(jié)束語(yǔ)

使用Html5進(jìn)行電子書(shū)制作的關(guān)鍵在于靈活使用流行的js庫(kù)，使用得當(dāng)可以輕易實(shí)現(xiàn)各種華麗的功能。

參考文獻(xiàn)：

[1]于海娟. 論H5在新媒體中的應(yīng)用[J]. 新聞?wù)搲?016，（04）：86-87

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