jQuery插件分享：Turn.js实现一个移动端电子书翻页

编辑: admin 分类: .net 发布时间: 2023-06-08 来源:互联网

怎么实现一个炫酷的翻书效果？下面本篇文章给大家分享一个jQuery插件--Turn.js，介绍一下怎么用Turn.js 实现移动端电子书翻页项目，希望对大家有所帮助！

先来看一下效果：

关于Turn.js

它是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果，支持触摸屏设备。Turn.js 支持硬件加速来让翻页效果更加平滑。【推荐学习：jQuery视频教程、web前端视频】

特征：

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

登录后复制

这样就可以实现基本的翻页效果了