怎么用jQuery插件Turn.js实现移动端电子书翻页效果

本篇内容主要讲解“怎么用jQuery插件Turn.js实现移动端电子书翻页效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用jQuery插件Turn.js实现移动端电子书翻页效果”吧!

成都创新互联自2013年起，是专业互联网技术服务公司，拥有项目网站设计制作、成都做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元天涯做网站,已为上家服务,为天涯各地企业和个人服务,联系电话:13518219792

先来看一下效果：

关于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 可前往官网下载

2 创建html和css

创建一个容器元素和一些代表页码的子元素，为其设置合适的宽高，随便输入一点内容

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) { } } });