html5电子图文

用turn.js做一本超丝滑的网页翻书：从零到一完整踩坑指南

写在前面：大家好，这里是我的前端碎碎念博客。
前阵子想给个人博客做一个线上作品集，把过往的项目案例、设计稿做成一本可以翻页的电子画册。找了一圈方案，要么是纯CSS写的翻页效果太生硬，要么是动辄上百KB的重库拖慢页面性能，最后挖到了turn.js这个宝藏库——几行代码就能实现和实体书几乎一模一样的翻页效果，连页角卷曲、阴影渐变、翻页回弹这些细节都拉满了。
今天就把我从零到一落地、踩了无数坑总结的完整经验全部分享出来，看完你也能给自己的网页加一个超有质感的翻书效果。

一、先搞懂：turn.js到底是什么？

turn.js是一个轻量级的jQuery插件，专门用来实现HTML5拟真翻页效果，底层基于CSS3的transform和transition做GPU硬件加速，哪怕是移动端也能做到60帧丝滑翻页，是目前网页翻书效果的首选方案。

它最打动我的几个核心优势：

  • 极致拟真：完美还原实体书的翻页体验，页角卷曲、翻页阴影、页面透视、回弹效果全部自带，不用自己写复杂的CSS动画
  • 超轻量：压缩后仅12KB，只依赖jQuery，引入即用，不会给页面带来过多负担
  • 兼容性拉满：支持IE9+及所有现代浏览器，PC、移动端自适应友好
  • API丰富灵活：翻页跳转、事件监听、单/双页切换、自定义动画等能力全覆盖，能满足绝大多数场景需求
  • 开箱即用：哪怕是前端新手，5分钟也能写出一个完整的翻页效果

补充：turn.js的最后一个稳定版本是4.1.0，虽然更新停在了几年前，但因为它基于标准CSS3实现，至今依然完美兼容所有主流浏览器，完全不用担心过时问题。

二、前置准备：2步完成环境引入

turn.js是jQuery插件，所以必须先引入jQuery，再引入turn.js，这里有两种引入方式，按需选择即可。

方式1：CDN快速引入（适合测试、快速demo）

直接在HTML的head里引入两行代码，不用下载任何文件：

1
2
3
4
<!-- 先引入jQuery（必须在turn.js之前） -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 再引入turn.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/turn.js/4.1.0/turn.min.js"></script>

方式2：本地引入（推荐，线上项目更稳定）

  1. 去turn.js官网或GitHub仓库下载源码，拿到turn.min.js文件
  2. 放到项目的静态资源目录，在HTML中引入：
    1
    2
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script src="./js/turn.min.js"></script>

避坑预警：90%的新手第一个坑就在这里！必须先引入jQuery，再引入turn.js，否则会一直报$().turn is not a function的错误，顺序绝对不能反。

三、5分钟快速上手：你的第一本翻页书

话不多说，直接上完整可运行的代码，复制到HTML文件里，用VSCode的Live Server打开就能看到效果，零门槛上手。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!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>
  <!-- 引入依赖 -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/turn.js/4.1.0/turn.min.js"></script>
  <style>
    /* 全局样式重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #f5f5f5;
    }
    /* 翻书容器：双页模式下，宽度=单页宽度*2 */
    #book {
      width: 600px;
      height: 400px;
      margin-bottom: 30px;
    }
    /* 单页样式：宽高必须和初始化参数一致 */
    #book .page {
      width: 300px;
      height: 400px;
      background-color: white;
      border: 1px solid #eee;
      /* 解决翻页时内容闪烁问题 */
      backface-visibility: hidden;
      transform: translateZ(0);
      /* 页面内容居中 */
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 80px;
      font-weight: bold;
      color: #333;
    }
    /* 封面/封底硬纸效果 */
    #book .hard {
      background-color: #2c3e50;
      color: white;
      font-size: 36px;
    }
  </style>
</head>
<body>
  <!-- 翻书主体：每一个.page就是一页 -->
  <div id="book">
    <div class="page hard">我的翻页书</div> <!-- 封面 -->
    <div class="page">1</div>
    <div class="page">2</div>
    <div class="page">3</div>
    <div class="page">4</div>
    <div class="page hard">封底</div> <!-- 封底 -->
  </div>

  <!-- 翻页控制按钮 -->
  <div class="btn-group">
    <button id="prevBtn">上一页</button>
    <span id="pageNum">第1页 / 共6页</span>
    <button id="nextBtn">下一页</button>
  </div>

  <script>
    // 页面加载完成后初始化翻书
    $(document).ready(function() {
      // 核心初始化：一行代码搞定翻页效果
      $('#book').turn({
        width: 600,        // 翻书容器总宽度（双页=单页宽*2）
        height: 400,       // 单页高度
        autoCenter: true,  // 自动居中
        elevation: 50,     // 翻页时的阴影高度，数值越大阴影越明显
        gradients: true,   // 开启翻页渐变效果，拟真度拉满
        duration: 600,     // 翻页动画时长，单位毫秒
        display: 'double', // 显示模式：double双页（PC）/single单页（移动端）
        hard: true         // 开启封面/封底硬纸效果
      });

      // 获取总页数
      const totalPages = $('#book').turn('pages');
      // 更新页码显示
      function updatePageNum() {
        const currentPage = $('#book').turn('page');
        $('#pageNum').text(`第${currentPage}页 / 共${totalPages}页`);
      }

      // 上一页按钮
      $('#prevBtn').click(function() {
        $('#book').turn('previous');
      });
      // 下一页按钮
      $('#nextBtn').click(function() {
        $('#book').turn('next');
      });
      // 翻页完成后更新页码
      $('#book').bind('turned', function(event, page, view) {
        updatePageNum();
      });

      // 初始化页码
      updatePageNum();
    });
  </script>
</body>
</html>

运行这段代码，你就能得到一本带封面封底、可点击页角翻页、有上下页控制、带页码显示的完整翻页书，鼠标拖拽页角还能模拟真实翻书的卷曲效果，细节直接拉满。

四、核心能力：常用API与事件监听

上面的demo只是基础用法，turn.js的强大之处在于它丰富的API，能实现各种自定义需求，这里整理了实战中90%场景都会用到的核心能力。

1. 高频操作API

方法 作用 示例
turn('next') 翻到下一页 $('#book').turn('next')
turn('previous') 翻到上一页 $('#book').turn('previous')
turn('page', n) 跳转到第n页 $('#book').turn('page', 3)
turn('page') 获取当前页码 const current = $('#book').turn('page')
turn('pages') 获取总页数 const total = $('#book').turn('pages')
turn('disable', true) 禁用/启用翻页（true禁用/false启用） $('#book').turn('disable', true)
turn('options', {key: value}) 动态修改初始化参数 $('#book').turn('options', {duration: 300})
turn('destroy') 销毁翻书实例 $('#book').turn('destroy')
turn('addPage', html, n) 动态添加第n页 $('#book').turn('addPage', '<div class="page">新页面</div>', 5)
turn('removePage', n) 删除第n页 $('#book').turn('removePage', 4)

2. 核心事件监听

通过事件监听，我们可以在翻页的各个节点执行自定义逻辑，比如页码更新、埋点统计、内容懒加载、翻页拦截等。

事件 触发时机 常用场景
turning 翻页动作开始前触发 翻页拦截（如禁止跳转到指定页）、翻页前数据预加载
turned 翻页动作完成后触发 更新页码、页面内容懒加载、访问埋点
start 用户开始拖拽页角时触发 自定义动画、交互反馈
end 用户结束拖拽页角时触发 拖拽结束后的逻辑处理
missing 跳转到不存在的页码时触发 异常兜底、页码纠错

实用示例：禁止用户跳转到未解锁的页面

1
2
3
4
5
6
7
8
// 翻页前拦截
$('#book').bind('turning', function(event, page, view) {
  // 假设第5页需要登录才能查看
  if (page === 5 && !isLogin) {
    alert('请先登录后查看！');
    return false; // return false 直接禁止翻页
  }
});

五、进阶玩法：让你的翻书效果更丝滑、更专业

基础用法只能实现简单效果，想要做出适配全端、体验拉满的翻页书，这些进阶技巧一定要收好。

1. 响应式适配：PC双页，移动端单页

双页模式在PC端体验很好，但在手机上会因为屏幕太窄导致内容看不清，我们可以监听窗口大小，动态切换显示模式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 适配函数
function resizeBook() {
  const screenWidth = $(window).width();
  // 屏幕宽度小于768px时，切换为单页模式
  if (screenWidth < 768) {
    $('#book').turn('options', {
      width: 300,
      height: 400,
      display: 'single'
    });
  } else {
    // 大屏恢复双页模式
    $('#book').turn('options', {
      width: 600,
      height: 400,
      display: 'double'
    });
  }
}

// 窗口大小变化时执行适配
$(window).resize(function() {
  resizeBook();
});

// 初始化时执行一次
resizeBook();

2. 图片内容懒加载，解决页面卡顿

如果你的翻页书里有大量图片，一次性加载所有图片会导致页面加载慢、翻页卡顿，我们可以结合turned事件，只加载当前页和前后页的图片：

1
2
3
4
<!-- 页面里的图片用data-src存放真实地址，不用src -->
<div class="page">
  <img class="lazy-img" data-src="./images/works-1.jpg" alt="作品1">
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 懒加载函数
function loadImg(page) {
  // 加载当前页、上一页、下一页的图片
  const loadPages = [page-1, page, page+1];
  loadPages.forEach(pageNum => {
    const $page = $(`.page:nth-child(${pageNum})`);
    const $img = $page.find('.lazy-img');
    // 如果还没加载，就把data-src赋值给src
    if ($img.attr('data-src') && !$img.attr('src')) {
      $img.attr('src', $img.attr('data-src'));
    }
  });
}

// 翻页完成后执行懒加载
$('#book').bind('turned', function(event, page) {
  loadImg(page);
});

// 初始化时加载第一页
loadImg(1);

3. 全屏滑动翻页，适配移动端习惯

turn.js默认只有拖拽页角才能翻页，移动端用户更习惯左右滑动全屏翻页，我们可以自己加触摸事件实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 移动端全屏滑动翻页
let startX = 0;
let endX = 0;

// 触摸开始
$('#book').on('touchstart', function(e) {
  startX = e.originalEvent.changedTouches[0].pageX;
});

// 触摸结束
$('#book').on('touchend', function(e) {
  endX = e.originalEvent.changedTouches[0].pageX;
  const diffX = endX - startX;
  // 滑动距离超过50px才触发翻页
  if (Math.abs(diffX) > 50) {
    // 向左滑：下一页
    if (diffX < 0) {
      $('#book').turn('next');
    }
    // 向右滑：上一页
    if (diffX > 0) {
      $('#book').turn('previous');
    }
  }
});

六、踩坑血泪史：90%的人都会遇到的问题及解决方案

这部分是我前前后后踩了十几个坑总结出来的避坑指南，能帮你省下大量调试时间。

  1. 翻页时内容闪烁、页面错位

    • 解决方案：给.page元素加上backface-visibility: hidden;和transform: translateZ(0);，开启硬件加速，解决渲染闪烁问题；同时确保初始化的宽高和.page的宽高完全一致，双页模式下容器宽度必须是单页宽度的2倍。

  2. SPA应用（Vue/React）中，二次进入页面实例错乱

    • 解决方案：页面组件销毁时，必须调用$('#book').turn('destroy')销毁实例，否则会出现重复绑定事件、翻页错乱的问题，Vue中写在onUnmounted里，React写在useEffect的销毁回调里。

  3. 本地打开页面，翻页效果不生效/报跨域错误

    • 解决方案：Chrome的file://本地协议有严格的安全限制，不要直接双击HTML文件打开，一定要用VSCode的Live Server、WebStorm的内置服务器等本地服务打开，用http://localhost协议访问。

  4. 移动端触摸翻页不灵敏、页角很难拖拽

    • 解决方案：不要依赖默认的页角拖拽，用上面进阶玩法里的全屏滑动事件替代；同时给翻书容器加上touch-action: none;，避免移动端触摸事件被浏览器默认行为拦截。

  5. 双页模式下页码错乱，封面单独占一页

    • 解决方案：turn.js的双页模式，默认第一页（封面）和最后一页（封底）单独占一页，从第二页开始才是左右两页并排。如果需要从第一页就双页显示，可以在最前面加一个空白的占位页，或者初始化时设置firstPage: 2。

  6. 翻页时页面里的视频/音频自动播放

    • 解决方案：监听turning事件，翻页前暂停非当前页的音视频；监听turned事件，翻页完成后再播放当前页的音视频，避免出现多个音视频同时播放的问题。

七、写在最后

turn.js这个库，最让我惊喜的点在于，它把复杂的翻页动画封装到了极致，哪怕是前端新手，也能快速做出专业级的翻页效果，不用去啃复杂的CSS3 3D变换和动画原理。

它的适用场景也非常广：个人作品集、电子杂志、产品手册、在线绘本、博客专题内容、年度报告等等，只要是想摆脱枯燥的滚动条，给用户带来沉浸式的浏览体验，它都是绝佳的选择。

学无止境
html5电子图文
https://cszy.top/2015-08-08 html5电子图文书刊-视频音频/
作者
csorz
发布于
2015年8月8日
许可协议