当前位置：首页 > web >正文

基于 jQuery 的轻量级在线画册、电子书、产品目录插件及使用

web 2025/8/23 0:26:43

Turn.js 画册旋转功能介绍及示例

Turn.js 是一个基于 jQuery 的轻量级 JavaScript 库，专为创建类书籍翻页效果的网页应用设计。其核心功能是通过模拟真实翻页动画（如阴影、弯曲效果等），为用户提供直观的交互体验，尤其适用于在线画册、电子书、产品目录等场景。以下是其关键特性和一个完整示例：

核心功能

真实翻页效果
- 模拟纸张翻动时的物理特性（如阴影、透视变化），支持单页或双页（跨页）展示。
- 兼容触摸设备，支持滑动、点击等手势操作。
高度可定制
- 通过参数配置调整翻页方向（左到右/右到左）、尺寸、动画速度、阴影强度等。
- 支持动态加载页面内容（如通过 AJAX），优化性能。
跨平台兼容
- 支持主流浏览器（Chrome、Firefox、Safari、Edge 等）及移动设备（iOS/Android）。
- 旧版浏览器（如 IE8）需额外引入 turn.html4.js。

完整示例代码

以下是一个使用 Turn.js 创建画册旋转效果的完整示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Turn.js 画册旋转示例</title><!-- 引入 jQuery 和 Turn.js --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/turn.js/4.1.0/turn.min.js"></script><style>#flipbook {width: 800px;height: 600px;margin: 0 auto;}.page {width: 400px;height: 600px;background: white;text-align: center;line-height: 600px;font-size: 24px;border: 1px solid #ccc;}.hard {background: #333 !important;color: white;}</style>
</head>
<body><div id="flipbook"><div class="hard">封面</div><div class="page">第1页</div><div class="page">第2页</div><div class="page">第3页</div><div class="hard">封底</div></div><script>$(document).ready(function() {$('#flipbook').turn({width: 800,height: 600,autoCenter: true,acceleration: true, // 启用硬件加速gradients: true,   // 启用渐变和阴影duration: 1000,    // 翻页动画持续时间（毫秒）display: 'double', // 双页展示when: {turned: function(e, page) {console.log('当前页码:', page);}}});});</script>
</body>
</html>

代码说明

HTML 结构
- 使用 div 容器包裹所有页面，每页用 class="page" 标识，封面/封底用 class="hard" 增强视觉效果。
CSS 样式
- 设置画册尺寸（#flipbook）和页面尺寸（.page），通过 border 区分页面边界。
JavaScript 初始化
- 调用 turn() 方法初始化翻页效果，配置参数包括：
  - width/height：画册尺寸。
  - autoCenter：自动居中。
  - acceleration：启用硬件加速。
  - gradients：启用阴影效果。
  - duration：翻页动画时间。
  - display：双页展示模式。
  - when：监听翻页事件（如 turned）。