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

探索Turn.js：打造惊艳的3D翻页效果

article 2025/9/25 16:37:00

1. 简介与特性

Turn.js 是一个基于 jQuery 的 JavaScript 库，专注于实现类书籍翻页的 3D 动画效果，支持 HTML5 和 CSS3，适配移动端触摸设备。其核心优势包括：

逼真的翻页动画：支持阴影、翻页角度、双页/单页模式等视觉效果26。
高度可定制：通过参数配置调整尺寸、翻页方向、过渡时间等38。
跨平台兼容：兼容主流浏览器（包括 IE8+ 需额外插件）47。
动态加载：支持按需加载页面内容，优化性能58。

2. 环境准备与安装

依赖项

jQuery 1.7+：Turn.js 基于 jQuery，需先引入16。
浏览器支持：Chrome、Firefox、Safari、Edge 等现代浏览器；IE8 需引入 turn.html4.js4。

安装方式

通过 npm 安装：

npm install turn.js

或直接引入 CDN 资源：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/turn.min.js"></script>

3. 基础用法与初始化

HTML 结构

创建容器元素，每个 .page 类代表一页：

<div id="flipbook"><div class="hard">封面</div><div class="page">第1页</div><div class="page">第2页</div><div class="hard">封底</div>
</div>

JavaScript 初始化

$(document).ready(function() {$('#flipbook').turn({width: 800,height: 600,autoCenter: true,page: 1,gradients: true});
});

参数说明：

width/height：书本尺寸。
autoCenter：是否自动居中。
page：初始页码16。

4. 配置参数详解

核心配置项

参数	类型	默认值	描述
`acceleration`	boolean	`true`	启用硬件加速（移动端必选）38。
`direction`	string	`ltr`	翻页方向（`ltr` 左到右，`rtl` 右到左）6。
`display`	string	`double`	显示模式（`single` 单页，`double` 双页）8。
`duration`	number	600	翻页动画时长（毫秒）6。
`gradients`	boolean	`true`	是否显示翻页阴影3。

进阶配置

动态设置总页数：

$('#flipbook').turn('pages', 10); // 设置总页数为10

自定义翻页角度：

elevation: 50 // 翻页时的弯曲高度:cite[3]。

5. 事件监听与交互

常用事件

事件名	触发时机	示例用法
`turning`	翻页开始前触发	预加载下一页内容5。
`turned`	翻页完成后触发	更新页码显示5。
`start`	用户开始拖动页面时触发	禁用其他交互控件4。
`end`	拖动结束时触发	恢复交互状态4。

事件绑定示例

$('#flipbook').turn({when: {turned: function(e, page) {console.log('当前页码:', page);$('#current-page').text(page);},turning: function(e, page, view) {// 预加载逻辑}}
});

6. 动态加载与页面管理

动态添加页面

// 添加新页面到第5页
var newPage = $('<div class="page">动态内容</div>');
$('#flipbook').turn('addPage', newPage, 5);

异步加载内容

$.get('data/chapter2.json', function(data) {data.pages.forEach(function(page) {var pageElement = $('<div class="page">' + page.content + '</div>');$('#flipbook').turn('addPage', pageElement);});
});

7. 兼容性与性能优化

兼容 IE8

引入 turn.html4.js 并添加条件注释：

<!--[if lt IE 9]><script src="path/to/turn.html4.js"></script>
<![endif]-->

性能优化建议

减少 DOM 元素：仅保留当前可见页及相邻页4。
图片压缩：使用低分辨率图片提升加载速度2。
硬件加速：确保 acceleration: true3。

8. 常见问题与解决方案

翻页动画卡顿

原因：页面元素过多或图片过大。
解决：优化 DOM 结构，使用 requestAnimationFrame 控制动画24。

翻页方向异常

原因：CSS 或参数冲突。
解决：检查 direction 参数及容器元素的 direction CSS 属性6。

9. 完整示例代码

<!DOCTYPE html>
<html>
<head><title>Turn.js 示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="node_modules/turn.js/dist/turn.min.js"></script><style>#flipbook {width: 800px;height: 600px;margin: 20px auto;}.page {background: #fff;padding: 20px;}</style>
</head>
<body><div id="flipbook"><div class="hard">封面</div><div class="page">第1页内容</div><div class="page">第2页内容</div><div class="hard">封底</div></div><script>$(document).ready(function() {$('#flipbook').turn({width: 800,height: 600,autoCenter: true,when: {turned: function(e, page) {console.log('当前页:', page);}}});});</script>
</body>
</html>

探索Turn.js：打造惊艳的3D翻页效果

目录简介与特性环境准备与安装基础用法与初始化配置参数详解事件监听与交互动态加载与页面管理兼容性与性能优化常见问题与解决方案完整示例代码 1. 简介与特性 Turn.js 是一个基于 jQuery 的 JavaScript 库，专注于实现类书籍翻页的 3D 动画效果…...

编程日记 2025/9/22 22:14:17

Midjourney 最佳创作思路与实战技巧深度解析【附提示词与学习资料包下载】

引言在人工智能图像生成领域，Midjourney 凭借其强大的艺术表现力和灵活的创作模式，已成为设计师、艺术家和创意工作者的核心工具。作为 CSDN 博主 “小正太浩二”，我将结合多年实战经验，系统分享 Midjourney 的创作方法论&#x…...

编程日记 2025/9/24 19:00:45

OPC UA + ABP vNext 企业级实战：高可用数据采集框架指南

🚀📊 OPC UA ABP vNext 企业级实战：高可用数据采集框架指南 🚀 📑 目录 🚀📊 OPC UA ABP vNext 企业级实战：高可用数据采集框架指南 🚀一、前言 🎯二、系统…...

编程日记 2025/8/7 22:34:01

MySQL库级管理：数据库管理与存储引擎剖析

引言各位数据库爱好者们好！今天我们要深入探讨MySQL数据库的基本操作，这是每位开发者必须掌握的"内功心法" 💪。无论你是刚接触MySQL的小白，还是需要复习基础的老手，这篇教程都将带你系统学习数据库的核心…...

编程日记 2025/8/30 6:16:22

LeetCode 2094.找出 3 位偶数：遍历3位偶数

【LetMeFly】2094.找出 3 位偶数：遍历3位偶数力扣题目链接：https://leetcode.cn/problems/finding-3-digit-even-numbers/ 给你一个整数数组 digits ，其中每个元素是一个数字（0 - 9）。数组中可能存在重复元素。你…...

编程日记 2025/9/12 16:47:57

机器学习-计量经济学

机器学习不要事前决定变量关系，关键是谁也不知道啊，机器学习学习的模型（那也不是真实的关系啊） 这就是自然学科的好处：只要不断的优化这个未知的东西（函数），然后在数据上&#xff…...

编程日记 2025/9/20 22:13:53

工具篇-扣子空间MCP，一键做游戏，一键成曲

一、登陆扣子空间地址如下： 扣子空间打开，然后登陆扣子登陆之后快速开始： 二、生成游戏小试牛刀，我们让它做一个打地鼠的游戏： 已经开始设计制作： 制作完成： 三、制作音乐新…...

编程日记 2025/9/24 18:33:57

5.6 - 5.9 MySQL

数据库：存储和管理数据的仓库DB。数据库管理系统：操纵和管理数据库的大型软件DBMS。关系型数据库一个数据库内可以创建多张表，在一个表内能存放多个数据。 SQL语句： DDL： 存储字符串用varchar。（类似于…...

编程日记 2025/9/24 18:52:03

C# WinForm 如何高效地将大量数据从 CSV 文件导入 DataGridView

如果你有非常多的csv文件，每个文件包含N多行与M多列，如：18000 行和 27 列。现在，想制作一个 Windows 窗体应用程序，导入它们并在 datagridview 中显示，然后进行一些数学运算。可是，发现数据导入…...

编程日记 2025/9/24 18:56:59

【redis】redis常见数据结构及其底层，redis单线程读写效率高于多线程的理解，

redis常用数据结构及底层 string字符串、list链表、set无序集合、zset有序集合、hash哈希 1.string 底层结构是SDS简单动态字符串 struct sdshdr {int len; // 已用长度（字符串实际长度）int free; // 剩余可用空间char buf[]; // 数组&#…...

编程日记 2025/9/19 5:11:59

2025年5月AI科技领域周报（5.5-5.11）：AGI研究进入关键验证期具身智能开启物理世界交互新范式

2025年5月AI科技领域周报（5.5-5.11）：AGI研究进入关键验证期具身智能开启物理世界交互新范式一、本周热点回顾1. OpenAI发布GPT-5多模态大模型突破通用智能关键阈值2. 特斯拉Optimus机器人量产版发布具身智能进入工业场景3. 百度文心ERNIE…...

编程日记 2025/6/20 12:55:31

SQLPub：一个提供AI助手的免费MySQL数据库服务

给大家介绍一个免费的 MySQL 在线数据库环境：SQLPub。它提供了最新版本的 MySQL 服务器测试服务，可以方便开发者和测试人员验证数据库功能，也可以用于学习 MySQL。免费申请在浏览器中输入以下网址： https://sqlpub.com/ SQLP…...

编程日记 2025/9/24 19:01:05

URP相机如何将场景渲染定帧模糊绘制

1）URP相机如何将场景渲染定帧模糊绘制 2）为什么Virtual Machine会随着游戏时间变大 3）出海项目，打包时需要勾选ARMv7吗 4）Unity是手动还是自动调用GC.Collect 这是第431篇UWA技术知识分享的推送，精选了UWA社…...

编程日记 2025/9/25 11:16:40

WeakAuras Lua Script ICC （BarneyICC）

WeakAuras Lua Script ICC （BarneyICC） https://wago.io/BarneyICC/69 全量英文字符串： !WA:2!S33c4TXX5bQv0kobjnnMowYw2YAnDKmPnjnb4ljzl7sqcscl(YaG6HvCbxaSG7AcU76Dxis6uLlHNBIAtBtRCVM00Rnj8Y1M426ZH9XDxstsRDR)UMVCTt0DTzVhTjNASIDAU…...

编程日记 2025/9/24 18:33:42

为什么 mac os .bashrc 没有自动加载？

原因说明在macOS中，默认情况下，终端使用的是Bash或Zsh作为shell。对于较新版本的macOS（从Catalina开始），默认的shell已经切换为Zsh。因此，如果你正在使用Zsh，.bashrc文件不会自动生效&#xf…...

编程日记 2025/7/15 10:57:44

FramePack - 开源 AI 视频生成工具

🎬 项目简介由开发者 lllyasviel 创建的一个轻量级动画帧处理工具库，专门用于游戏开发、动画制作和视频处理中的帧序列打包与管理。该项目采用高效的算法实现，能够显著提升动画资源的处理效率。此 AI 视频生成项目，旨在通过低显…...

编程日记 2025/9/24 18:49:49

断点续传使用场景，完整前后端实现示例，包括上传，下载，验证

断点续传在多个场景中非常有用，包括但不限于大文件上传、跨国或跨区域文件传输、移动设备文件传输、备份和同步以及软件更新等。接下来，我将为你提供一个基于Java的后端实现示例，结合前端逻辑来完成整个断点续传的功能，包括上传、…...

编程日记 2025/6/24 5:10:57

【行为型之迭代器模式】游戏开发实战——Unity高效集合遍历与场景管理的架构精髓

文章目录 🔄 迭代器模式（Iterator Pattern）深度解析一、模式本质与核心价值二、经典UML结构三、Unity实战代码（背包系统遍历）1. 定义迭代器与聚合接口2. 实现具体聚合类（背包物品集合）3. 实现具…...

编程日记 2025/8/19 23:16:25

Vuetify框架使用(一)之v-snackbar 组件封装及全局使用

说明：v-snackbar 组件适用于统一管理消息提示框(操作反馈的提示) 看效果： 1、在状态管理中创建文件，统一管理 // stores/snackbar.js /*** 统一管理消息提示框(操作反馈的提示)*/import { defineStore } from pinia; // 消息类型 export co…...

编程日记 2025/9/24 18:54:48