turn.js：用 HTML5 和 CSS3 打造逼真的网页翻书效果-矩阵键Matrikey

turn.js 是一个基于 jQuery 的翻页特效库，用 HTML5 和 CSS3 就能做出接近纸质书的 3D 翻页效果。翻页时有阴影、透视和过渡动画，视觉上很像在翻一本真书。它同时支持桌面浏览器和手机、平板的触摸滑动，不需要额外装插件，拿来做电子书、数字杂志或者产品画册都挺合适。官方文档在 turnjs.com/docs，属性和方法的说明都能查到。

用起来不复杂。先引入 jQuery，再引入 turn.min.js（压缩版更轻量），然后在页面里放一个容器，里面每个子元素就是一页，封面和封底加上 hard 类表示硬壳。页面加载完成后，选中容器调用 .turn() 并传入尺寸、显示模式等参数，翻页效果就出来了。

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

$('#flipbook').turn({
    width: 800,
    height: 600,
    display: 'double',
    autoCenter: true,
    acceleration: true
});

几个常用配置值得留意：display 设为 single 是单页、double 是双页，移动端建议单页，桌面端双页看着更舒服；width 和 height 要和页面元素尺寸对得上；autoCenter 开启后内容会自动居中；触摸设备把 acceleration 设为 true，能启用硬件加速，翻起来更跟手。

控制翻页用 next()、previous() 和 page(n)，分别对应下一页、上一页和跳到指定页。需要动态加页或删页，用 addPage(element, position) 和 removePage(n)。翻页完成后会触发 turned 事件，可以借这个时机更新页码或者加载新内容；缩放时触发 zooming，配合响应式布局调整。整个实例不用了，调用 destroy() 清理 DOM 和内存。

实际用的时候有几个地方容易踩坑。页面数量多的话，别一次性把所有内容都渲染出来，按需加载能避免卡顿。窗口尺寸变化时，可以监听 resize 动态调整 width 和 height。另外，不同版本的 turn.js 参数可能有差异，以官方文档为准比较稳妥。