turnjs4教程：实现手机翻页电子书效果

Turn.js 是一款用于创建HTML5交互式翻页效果的JavaScript库，特别适合制作电子书或者需要翻页展示内容的网页应用。本文档是关于Turn.js v4的学习笔记，旨在帮助开发者理解和使用这款工具。 首先，让我们了解下载和准备工作。访问Turn.js的官方网站<http://www.turnjs.com/>，可以从那里下载所需的JavaScript文件、示例代码和API文档。在HTML中，你需要创建一个`<div>`元素作为容器来承载所有页面，提供三种方式来添加页面： 1. 直接在`<div>`中插入页面内容，例如： ```html <div id="flipbook"> <!-- 第1页 --> <div class="page">...</div> <!-- 第2页 --> <div class="page">...</div> <!-- 第3页 --> <div class="page">...</div> </div> ``` 2. 使用API提供的`addPage`方法动态添加页面： ```javascript $('.flipbook').turn('addPage', $('<div class="page">...</div>'), 3); // 向最后一页后添加一页 ``` 3. 结合第一种和第二种方式，根据需求灵活调整页面结构。 接下来是样式设置。Turn.js提供了多种样式选项，如`hard`和`own-size`，你可以根据需要设置每一页的样式，比如： ```css .p1 { /* 第一页样式 */ } .p2 { /* 第二页样式 */ } .p3 { /* 第三页样式 */ } ``` 构造方法`$('#flipbook').turn([options])`用于初始化翻书效果，可以配置如宽度、高度、硬件加速、页面显示模式等。以下是常用配置项的示例： ```javascript $('.flipbook').turn({ width: 922, height: 600, acceleration: true, // 触摸设备启用硬件加速 autoCenter: false, // 是否自动居中 display: 'double', // 单页或双页显示模式 duration: 1000, // 翻页动画时间（毫秒） gradients: true, // 显示翻页阴影渐变 inclination: 0, // 书籍倾斜角度（仅限某些布局） page: 1, // 初始显示的页码 when: {} // 监听事件处理 }); ``` 方法部分，主要包括`addPage`和`display`方法，分别用于动态添加页面和控制页面展示。`addPage`接受页面元素和页码作为参数，而`display`则可以用来切换显示的页面内容。 这篇学习笔记概述了如何在项目中集成Turn.js v4，包括HTML结构的准备、样式设置、构造方法的配置以及关键方法的使用。通过理解和实践这些内容，开发者能够快速地创建出具有翻页功能的电子书展示效果。