turnjs 4 API DOCUMENTATION

• 语言: 英语
• 格式: .pdf
• 来源: www.turnjs.com

摘要

文档详细介绍了turn.js 4的API功能及使用方法。turn.js是一个基于jQuery的插件，提供了构造函数、选项、方法和事件来创建和控制翻页效果。版本4添加了新的选项如autoCenter和zoom，新方法如center、destroy、is和zoom，以及新事件如missing和zooming。同时改进了动画性能，优化了事件处理，并修复了多个问题。文档还介绍了如何通过HTML、API或两者结合的方式添加页面，以及如何处理IE8浏览器的兼容性问题。

AI总结

## Turn.js 4 API 文档总结

### 简介
- Turn.js 是一个 jQuery 插件，用于创建翻页效果。
- 提供属性、方法和事件，支持定义用户交互。
- 主要版本更新内容包括：
- 新增选项：`autoCenter`、`zoom`。
- 新增方法：`center`、`destroy`、`is`、`zoom`。
- 新增事件：`missing`、`zooming`。
- 新增 CSS 类：`.even`、`.fixed`、`.hard` 等。
- 优化动画性能，支持硬页效果。

---

### 支持与兼容性
- **浏览器支持**：
- Safari for iOS（iPad、iPhone、iPod）。
- Safari 5、Chrome 11、Chrome for Android、Firefox 9、IE 9、IE 8。
- **IE8 支持**：需使用 `turn.html4.js`，推荐配合 Modernizr 和 YepNope.js 使用。

---

### 核心功能
#### 1. 构造函数
- 用法：`$(‘#flipbook’).turn([options]);`，可选 `options` 配置翻页书特性。

#### 2. 选项
- **acceleration**：开启硬件加速（默认 `true`）。
- **drag**：是否允许拖动翻页（默认 `true`）。
- **keyboard**：是否支持键盘控制（默认 `true`）。
- **display**：页面显示模式（`single`、`double`、`cover`）。
- **hard**：是否启用硬页面翻转效果（默认 `true`）。
- **autoCenter**：自动居中页面（默认 `true`）。
- **autoPlay**：自动翻页时间间隔（默认 `0`，关闭自动翻页）。

#### 3. 方法
- **`destroy`**：销毁翻页书实例并清除资源。
- **`hasPage`**：检查指定页面是否已加载。
- **`next`**：翻至下一页。
- **`is`**：检测容器是否为翻页书实例。
- **`center`**：将当前页面居中显示。
- **`zoom`**：缩放页面。

#### 4. 事件
- **`missing`**：页面缺失时触发。
- **`zooming`**：页面缩放过程中触发。
- 翻页相关事件：`turning`、`turned`。

---

### 性能优化
- Turn.js 能够支持非常长的翻页书。
- 仅保留最近 6 页的 DOM 元素，释放旧页面内存。

---

### HTML 结构
- 翻页书内容放置在 DOM 容器中。
- 添加页面方式：
1. 直接写入容器内的 HTML。
2. 动态通过 API 添加。
3. 混合方式（静态 + 动态）。

---

### CSS 类
- Turn.js 通过类控制页面布局：
- `.own-size`：页面自定义尺寸。
- `.fixed`：页面固定在中心。
- `.hard`：启用硬页翻转效果。
- `.sheet`：表示单页的正反面。

---

### 其他
- **ignore 属性**：添加 `ignore="1"` 可使元素不被视为页面。
- **Corners**：交互区域（如 `tl`、`tr` 等）。

---

### 总结
Turn.js 4 是一款功能强大的翻页效果插件，支持丰富的定制选项和优化性能，适合长内容展示场景。其通过 DOM 管理和资源优化，确保在大页面量下依然流畅运行，同时兼容主流浏览器。