如何使用WowBook jQuery Flipbook插件

最新推荐文章于 2024-09-25 07:52:05 发布

cunjie3951

最新推荐文章于 2024-09-25 07:52:05 发布

阅读量2.6k

点赞数 1

文章标签： javascript js css java html ViewUI

本文介绍如何使用WowBook jQuery插件创建交互式翻页书，涵盖从PDF和图片生成翻页书、创建工具栏、目录及幻灯片放映等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

使用WowBook插件创建的动画书具有响应性，并且在台式机和移动设备上看起来都不错。此外，它们支持常见的触摸手势，例如捏缩放。

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

1.获取WowBook

如果您还没有Envato Market帐户，请立即创建一个。然后登录到CodeCanyon和购买许可证的WowBook 。

现在，您将能够下载一个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()方法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>

在上面的代码中， my_flip_book每个<div>元素都等效于翻页的一页。

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

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

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

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

现在，翻转书应如下所示：

如果没有方便的有趣照片，可以从PhotoDune或Pexels下载。

WowBook也可以生成精装翻转书。当您将hardcovers选项设置为true ，插件将对首页和末页应用替代动画，从而使它们看起来不那么卷曲并且更僵硬。

4.添加工具栏

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

例如，以下代码创建一个带有四个控件的工具栏，该工具栏显示在活页簿下方：

$("#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
});