使用 Turn.js 快速制作 HTML5 杂志

Turn.js 是一个 JavaScript 库，它利用 HTML5 的所有优势使您的内容看起来像一本真正的书籍或杂志。基于 HTML5 的新用户界面让网络变得更加美观；turn.js 最适合基于 HTML5 的杂志、书籍或目录。

基础代码

<div id="flipbook">
	<div class="hard"> Turn.js </div>
	<div class="hard"></div>
	<div> Page 1 </div>
	<div> Page 2 </div>
	<div> Page 3 </div>
	<div> Page 4 </div>
	<div class="hard"></div>
	<div class="hard"></div>
</div>

<script type="text/javascript">
	$("#flipbook").turn({
		width: 400,
		height: 300,
		autoCenter: true
	});
</script>

运行代码

特点

✓ 适用于 iPad 和 iPhone。
✓ 简单、美观且功能强大的 API。
✓ 允许通过 Ajax 请求动态加载页面。
✓ 纯 HTML5/CSS3 内容。
✓ 两种过渡效果。
✓ 兼容大部分浏览器。

jQuery版本要求

jQuery 1.3 及以上均可.

浏览器兼容

Safari 5 Chrome 16 Firefox 10 IE 10, 9, 8

支持移动设备

✓ 所有iOS（iPad、iPhone、iPod）
✓ Android（适用于Android的Chrome浏览器）

API Documentation

turn.js 作为简洁方便的 jQuery 的 UI 插件，它提供多种分类功能设置，并允许您定义用户交互。完整文档如下。

选项

属性

方法

事件

CSS Classes

关于网站

虽然站长离开前端开发行业已经6年由余，但一直尝试用新技术推动网站前端用户体验的发展。也经常喜欢利用业余时间收集并整理一些国外优秀的轻量级的js插件。

联系方式QQ:405748322 或e-mail：405748322@qq.com

Turn.js 制作 HTML5 杂志