turnjs 4 API DOCUMENTATION

## 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 管理和资源优化，确保在大页面量下依然流畅运行，同时兼容主流浏览器。