javaScript+turn.js如何实现图书翻页效果

JavaScript 的 turn.js 是一款用来实现图书翻页效果的插件，使用简单，效果逼真，广泛用于在线杂志、电子书等网络应用的制作。

turn.js 的主要特点：

1. 体积小巧，性能高效；

2. 提供多种翻书效果供选择，满足不同需求；

3. 支持移动设备的触控翻页；

4. 可以自定义书脊、页面尺寸、缩放等参数；

5. 支持 AJAX 加载页面内容，实现异步加载；

6. 支持回调函数，可以在翻页过程中进行自定义操作。

下面，我们通过一个实例来演示如何使用 turn.js 实现图书翻页效果。

一、引入 turn.js 插件

首先，我们需要引入 turn.js 的相关文件和样式，可以从 GitHub 中下载。

turn.js 经过压缩处理后，文件体积只有约 24KB，而 CSS 文件体积更小，只有约 1KB，因此不会影响页面加载速度。

我们可以按照以下方式引入相关文件：

<link rel="stylesheet" type="text/css" href="turn.min.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="turn.min.js"></script>

二、HTML 结构

然后，我们需要构建出类似于以下的 HTML 结构：

<div class="magazine">
  <div class="flipbook">
    <div class="page p1">Page 1</div>
    <div class="page p2">Page 2</div>
    <div class="page p3">Page 3</div>
    <div class="page p4">Page 4</div>
  </div>
</div>

其中，magazine 是最外层的容器，flipbook 是用来放置整本书的容器，page 则是每一页的容器。

在上述 HTML 结构中，我们只定义了四页内容，实际应用中，可以根据需要动态加载页面。

三、初始化 turn.js

接下来，我们需要对 flipbook 容器进行初始化，通过下面的代码来完成：

$(function() {
  $(".flipbook").turn({
    width: 800,   // 容器宽度
    height: 600,  // 容器高度
    autoCenter: true,  // 自动居中
    duration: 1000,  // 翻页动画时长
    elevation: 50  // 翻页抬升高度
  });
});

在上面的代码中，我们使用了 jQuery 的 $() 函数，将 turn.js 应用到了 flipbook 的容器上，其中，width 和 height 是容器的宽度和高度；autoCenter 表示是否自动居中，如果设置为 true，则容器会自动居中显示；duration 表示翻页动画时长，单位是毫秒；elevation 表示翻页抬升高度，单位是像素。

四、设置翻页效果

然后，我们可以通过下面的代码来设置翻页效果，turn.js 提供了多种效果供选择：

$(".flipbook").turn("peel", "br");

在这里，我们使用了 peel 效果，即页面像书皮一样翻转。其中，peel 后面的 br 表示竖直方向的翻转，也可以设置为 tl、bl、tr、br、l、r 等多种方向。

五、绑定触控事件

最后，我们可以为移动端设备绑定触控事件，使其支持触控翻页。在下面的代码中，我们通过 touchstart 和 touchmove 事件来实现触控翻页效果：

$(".flipbook").bind("touchstart", function(event) {
  event.preventDefault();
  $(this).turn("next");
});

$(".flipbook").bind("touchmove", function(event) {
  event.preventDefault();
});

在上述代码中，我们使用了 preventDefault() 方法来阻止默认事件的发生，然后调用 turn() 方法来进行翻页。在触控移动的时候，我们同样使用了 preventDefault() 方法来阻止页面滚动。

通过上述步骤，就可以轻松实现图书翻页效果，turn.js 简单易用，功能丰富，是一款非常优秀的图书展示插件。