如何使用WowBook jQuery动画书插件

如果您正在寻找一种易于使用的工具，可以将您的照片和 pdf 文件转换为交互式翻书或幻灯片放映，WowBook是最受欢迎的 jquery 插件之一，适合您。这个高级插件提供了两种逼真的翻页效果，并带有翻页声音，并且可以在所有现代浏览器上流畅运行。

使用 WowBook 插件创建的翻书具有响应性，并且在桌面和移动设备上看起来都很好。此外，它们还支持常见的触摸手势，例如捏缩放。

在本教程中，我将向您展示如何将 WowBook 添加到 Web时代并充分利用它提供的所有功能。

1.获取 WowBook

如果您还没有Envato Market 帐户，请立即创建一个。

您现在可以下载包含与插件相关的所有必要文件和文档的 ZIP 文件。该文件有一个名为wow_book的目录，其中包含插件源代码的最小化版本。您必须将此目录解压缩到您的开发环境中才能使用 WowBook。

此时，要将 WowBook jQuery 插件添加到网页中，您需要做的就是包含以下javascript和css文件：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script src="./wow_book/wow_book.min.js">
</script><script type="text/JavaScript" src="./wow_book/pdf.combined.min.js">
</script><link rel="stylesheet" href="./wow_book/wow_book.css" type="text/css" />

请注意， 如果您不打算将 WowBook 用于 PDF 文件，则可以省略pdf.combined.min.js 。

虽然这个 jQuery 插件支持旧版本的 jQuery，但在本教程中，我们将使用 jQuery v3.3.1。

2.制作翻书

WowBook 所需要的只是一个空<div> 元素来渲染翻书的页面。因此，现在使用以下代码创建一个：

<div id="my_flip_book"></div>

然后，在您的 javaScript 代码中，您可以选择<div> 元素并调用其 wowBook() 方法来生成翻书。作为参数，该方法需要一个 JavaScript 对象，其中包含有关翻书的配置详细信息。

WowBook 提供了许多直观命名的配置选项。例如，要在翻书内呈现 PDF 文件的页面，您可以使用该pdf 选项并指定文件的位置。

<script>
  $("#my_flip_book").wowBook({
    pdf: 'sample.pdf'
  });
</script>

虽然上面的代码足以生成一个简单的翻书，但它的尺寸将取决于 PDF 文件的页面大小。为了更好地控制翻书的大小，您必须将container 选项设置为true。完成此操作后，您将能够使用containerWidth 和containerHeight 选项来指定所需的像素尺寸。

默认情况下，容器是透明的。如果您愿意，可以使用该containerbackground选项为其提供纯色。

$("#my_flip_book").wowBook({
  container: true,
  containerHeight: 670,
  containerWidth: 830,
  pdf: 'sample.pdf',
  containerBackground: '#333'
});

如果您现在在浏览器中打开您的网页，您应该能够看到翻书。当您将鼠标悬停在书的角落附近时，您将能够看到卷曲动画。然后，您可以单击或拖动角来翻页。

当您翻动翻书的页面时，您应该能够在大多数浏览器中听到翻页声音。

3.创建相册

WowBook 不仅仅是一个自定义的 PDF 查看器。您也可以使用它从 html 内容快速生成翻书。

例如，下面的代码创建一个有四页的翻书，每页显示一张照片。

<div id="my_album">
  <div>
    <img class="photo" src="photo1.jpg"/>
  </div>
  <div>
    <img class="photo" src="photo2.jpg"/>
  </div>
  <div>
    <img class="photo" src="photo3.jpg"/>
  </div>
  <div>
    <img class="photo" src="photo4.jpg"/>
  </div></div>

在上面的代码中，<div> 里面的每个元素my_flip_book 都相当于翻书的一页。

您可能已经注意到， photo 每个<img> 元素都有一个名为的类。使用该类，您可以快速指定照片的大小。例如，如果您希望照片完全覆盖页面，同时确保它们的纵横比ios不会改变，您可以使用以下 CSS 规则：

<style>
  .photo {
    width: 100%;
  }
</style>

正如您在上一步中已经了解的那样，您现在必须调用该wowBook() 方法来生成翻书。但是，这一次您不需要该pdf 选项，因为翻书的内容已经在您的 HTML 代码中定义。

<script>
  $("#my_album").wowBook({
    container: true,
    containerHeight: 670,
    containerWidth: 940
  });
</script>

翻书现在应该是这样的：

如果您手边没有任何有趣的照片，您可以从 PhotoDune或Pexels下载一些。

WowBook 也可以生成精装翻书。当您将 hardcovers 选项设置为 时true，插件将在第一页和最后一页应用替代动画，这使它们看起来不那么卷曲而更加僵硬

4.添加工具栏

WowBook 允许您将包含各种导航控件的工具栏添加到您的翻书。要创建工具栏，您必须使用该toolbar 选项并按照您希望它们出现的顺序指定所需控件的名称。或者，您可以使用该  选项来指定您希望工具栏出现的位置。目前，此选项仅支持两个值： 和。toolbarpositiontopbottom

例如，下面的代码创建了一个带有四个控件的工具栏，如下图所示：

$("#my_album").wowBook({
  container: true,
  containerHeight: 670,
  containerWidth: 940,
  hardcovers: true,
  toolbar: "back, next, first, last",
  toolbarPosition: "bottom"
});

这是工具栏的样子：

除了用于导航的按钮之外，您的工具栏还可以包含允许用户在 Twitter、Facebook、Reddit 和其他流行的社交网络平台上轻松共享您的翻书的按钮。要显示此类按钮，您必须使用该share 选项。此外，您必须将“share”字符串添加到toolbar 选项中。以下代码向您展示了如何：

$("#my_album").wowBook({
  container: true,
  containerHeight: 670,
  containerWidth: 940,
  hardcovers: true,
  toolbar: "back, next, first, last, share",
  toolbarPosition: "bottom",
  share: "twitter, facebook, reddit"
});

工具栏现在将显示您在 share 选项中提到的社交网络的图标。

5.创建目录

如果您正在显示一本包含许多页面的翻书，您可能希望允许您的用户使用显示目录的面板跳转到他们想要的任何页面。要创建这样的面板，您需要一个 JavaScript 数组，其中的每个元素都将标题与页码相关联。

这是一个示例数组，它为我们之前创建的翻书的所有四页提供标题：

var tableOfContents = [
  ["Eiffel Tower", 0],
  ["Breakfast", 1],
  ["Snowy Day", 2],
  ["Mountains", 3],
];

如您所见，上述数组的每一项本身就是一个数组，其第一个元素是标题，第二个元素是页码。

要将阵列与您的翻书关联，您必须使用该toc 选项。此外，您必须记住将displayToc 选项设置为true 或将字符串添加toc 到toolbar 选项。否则，您的用户将无法看到目录。

$("#my_album").wowBook({
  container: true,
  containerHeight: 670,
  containerWidth: 940,
  hardcovers: true,
  toolbar: "back, next, first, last, toc",
  toolbarPosition: "bottom",
  displayToc: true,
  toc: tableOfContents
});

显示目录的面板如下所示：

6.创建幻灯片

通过将slideShow 选项设置为true，您可以将翻书转换为动画幻灯片。在这种模式下，WowBook 会自动翻阅您的翻书的所有页面。默认情况下，每个页面仅显示一秒钟。要更改此持续时间，您可以使用该slideShowDelay 选项。此外，如果您希望插件在显示最后一页后重新开始幻灯片放映，请将slideShowLoop 选项设置为true.

以下示例代码创建一个重复的幻灯片放映，其中每个页面显示三秒钟：

$("#my_album").wowBook({
  container: true,
  containerHeight: 670,
  containerWidth: 940,
  slideShow: true,
  slideShowDelay: 3000,
  slideShowLoop: true
});

结论

您现在知道如何使用 WowBook jQuery 插件创建动画翻书了。在本教程中，您还学习了如何为您的翻书快速生成目录和直观的工具栏。