javaScript+turn.js实现图书翻页效果实例代码

JavaScipt + turn.js 实现图书翻页效果实例

介绍

在网站开发中，我们经常需要将一些电子书或者pdf格式的文档转化为网页形式，同时保留原有的阅读体验，这时候实现图书翻页效果就显得尤为重要。

turn.js 是一个基于 JQuery 的图书翻页插件，通过 turn.js 插件，我们可以方便快捷地实现 Web 端的图书翻页效果。

本文将讲解 turn.js 的使用方式。

实现步骤

下载 turn.js：从 GitHub 上下载 turn.js 文件，将 turn.js 和 turn.css 文件上传至服务器，并在页面头部引入 css 和 js 文件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图书翻页效果</title>
    <link rel="stylesheet" href="path/to/turn.css">
    <script src="path/to/jquery.min.js"></script>
    <script src="path/to/turn.js"></script>
</head>
<body>

</body>
</html>

组织 HTML 结构：turn.js 将一个页面嵌入在一个 div 元素中，每个页面需要使用一个 div 元素包裹。例如下面的例子：

<div class="magazine-viewport">
  <div class="container">
    <div class="magazine">
      <div>Page 1</div>
      <div>Page 2</div>
      <div>Page 3</div>
      <div>Page 4</div>
    </div>
  </div>
</div>

初始化 turn.js：在页面加载完成后，使用 turn() 函数对元素进行初始化。例如：

$(window).ready(function() {
  $('.magazine').turn({
    display: 'double',
    acceleration: true,
    gradients: !$.isTouch,
    elevation:50,
    when: {
      turned: function(e, page) {
        console.log('Current view: ', $(this).turn('view'));
      }
    }
  });
});

配置选项：通过配置选项可以实现更多自定义的效果。例如：

$('.magazine').turn({
  display: 'double',
  acceleration: true,
  gradients: !$.isTouch,
  elevation:50,
  when: {
    turned: function(e, page) {
      console.log('Current view: ', $(this).turn('view'));
    }
  }
});

效果示例

示例一

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图书翻页效果</title>
    <link rel="stylesheet" href="http://localhost/jquery-turnjs/css/turn.css">
    <script src="http://localhost/jquery-turnjs/js/jquery.min.js"></script>
    <script src="http://localhost/jquery-turnjs/js/turn.js"></script>
</head>
<body>
  <div class="magazine-viewport">
    <div class="container">
      <div class="magazine">
        <div><img src="http://localhost/jquery-turnjs/img/1.jpg" /></div>
        <div><img src="http://localhost/jquery-turnjs/img/2.jpg" /></div>
        <div><img src="http://localhost/jquery-turnjs/img/3.jpg" /></div>
        <div><img src="http://localhost/jquery-turnjs/img/4.jpg" /></div>
        <div><img src="http://localhost/jquery-turnjs/img/5.jpg" /></div>
        <div><img src="http://localhost/jquery-turnjs/img/6.jpg" /></div>
      </div>
    </div>
  </div>

  <script type="text/javascript">
    $(window).ready(function() {
      $('.magazine').turn({
        display: 'double',
        acceleration: true,
        gradients: !$.isTouch,
        elevation:50,
        when: {
          turned: function(e, page) {
            console.log('Current view: ', $(this).turn('view'));
          }
        }
      });
    });
  </script>
</body>
</html>

将以上代码复制到一个 html 文件中，将其中的路径信息替换为自己的本地文件路径，然后用浏览器打开该文件即可看到效果。