继续创造，加快成长！这是我参与「日新计划 10 月更文应战」的第11天，点击查看活动详情

最近有些工作，断更了几天，朝着连续更文14天继续努力

今天共享一个用Turn.js 完成的移动端电子书翻页项目。

先来看一下作用：

关于Turn.js

它是一个轻量级的 (15kb) jQuery/html5 插件用来创立相似书本和杂志翻页作用，支撑触摸屏设备。Turn.js 支撑硬件加快来让翻页作用愈加平滑。

特征：

  • 适用于 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) {
        }
    }
});

这样就能够完成根本的翻页作用了

Turn.js完成超奈斯的翻书作用

3.1 turn常用装备项

Turn.js完成超奈斯的翻书作用

3.2 when 常用监听事件

Turn.js完成超奈斯的翻书作用

3.3 turn 常用方法

Turn.js完成超奈斯的翻书作用

项目完成

项目有30p，每一p都对应一张图片，一页一页搭建实在太慢了，用js创立

Turn.js完成超奈斯的翻书作用

封装一个turn.js根本装备的函数，依据api完成自己的翻页作用

Turn.js完成超奈斯的翻书作用

一进来调用创立函数，构建页面，判别当时浏览器环境是否支撑 csstransforms 特性，支撑 调用 turn.js 调用完毕后 履行 turn.js 根本装备函数

Turn.js完成超奈斯的翻书作用

拓宽

项目中用到两个js插件 简略介绍一下

Modernizr.js

传统浏览器现在不会被彻底取代，令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站。 Modernizr 正是为处理这一难题应运而生，作为一个开源的 JavaScript 库，Modernizr 检测浏览器对 CSS3 或 HTML5 功能支撑状况。

yeponpe.js

yepnope.js是一个能够依据输入条件来选择性异步加载资源文件的js脚本，能够在页面上仅加载用户需要的js/css。