基于HTML5的电子书效果制作

楼建忠

摘要： 随着社会与经济的高速发展，手机已经成为了人们生活和工作中一件必不可少的工具。移动端的电子书应运而生，本文主要以，电子书的形式来展示多种现在主流的页面翻页效果，并使用HTML5标准规范，实现移动端网页内容切换的效果。

关键词：HTML5；翻页效果；移动端

引言

电子书以Dreamweaver 作为编译制作软件进行设计与制作，以jQuery， Modernizr和turn库作为主要框架、JavaScript程序、 Html5 标记语言，并使用HTML5标准规范，实现移动端网页内容翻页效果，方便在手机上浏览。

一、电子书风格

电子书采用黄褐色的冷色调，突出一种孤独与冷静之感，让人更加容易感受作者的心境，与书的思想。电子书主体高度也就是里面内容的图片高度为640px，宽度为100%比例，主体设置为自适应。

二、JavaScript 库的使用

为了方便设计我们首先要做的就是引入相关的库，首先引入的是jQuery库，它是一个快速、简洁的JavaScript框架，然后引入Modernizr 库，它是一个用来检测浏览器功能支持情况的 JavaScript 库。通过这个库我们可以检测不同的浏览器对于HTML5特性的支持情况。相关代码如下：

三、手机检测与自适应

考虑到手机平台和浏览器的多样性，要能区分出是安卓手机还是苹果手机，并做出不同的处理，我们可以在网页头中加入以下代码

然后在加载函数中实现手机检测与自适应，代码如下：

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手机

}

四、翻书效果的实现

仿真翻书效果，尽可能达到平时我们在翻纸质书时翻书效果，极大的模拟我们平常各种翻书情景，使我们在阅读电子书时给我们一种身临其境的感觉，也能有效的避免在阅读时给人一种生硬的感觉，更加符合用户的体验需求翻页效果的实现。我们可以引入一个很流行的js库叫做Turn.js，它可以大加快我们的制作效率，要使用turn.js来实现翻页效果，首先要做的是配置turn.js，告诉turn.js页面的宽、高和页数等信息。首先，在网页body主体中添加以下标签

然后，配置电子书的宽高为屏幕宽高

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

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

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

当网页大小变化时同样改变电子书大小

$（window）.resize（function （） {

w = $（window）.width（）；

h = $（window）.height（）；

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

}）；

最终实现翻页效果代码如下：

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

}）；}；

至此电子书就完成了，最终效果发下：

结束语

使用Html5进行电子书制作的关键在于灵活使用流行的js库，使用得当可以轻易实现各种华丽的功能。

参考文献：

[1]于海娟. 論H5在新媒体中的应用[J]. 新闻论坛，2016，（04）：86-87

[2]陈婉凌. HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站[D]. 清华大学出版社.2015.01endprint