Turn.js中文教程

一、什么是Turn.js

Turn.js是一款JavaScript库，可用于创建现实世界中杂志或册子的3D翻页效果。它支持多种功能，包括自动翻页、响应式布局、缩略图、键盘和鼠标控制等。这个库允许你为你的Web应用程序添加光鲜亮丽的动态页面，让用户能够享受更加交互式的内容浏览体验。

下面是一个最基本的使用示例：

<!DOCTYPE html>
<html>
<head>
  <title>Turn.js Example</title>
  <!-- 引入Turn.js库 -->
  <script src="turn.min.js"></script>
  <link rel="stylesheet" type="text/css" href="basic.css">
</head>
<body>
  <div class="magazine">
    <div class="turn-page" data-placeholder="Page 1"></div>
    <div class="turn-page" data-placeholder="Page 2"></div>
    <div class="turn-page" data-placeholder="Page 3"></div>
    <div class="turn-page" data-placeholder="Page 4"></div>
  </div>
  <script>
    $('.magazine').turn();
  </script>
</body>
</html>

在上述示例中，我们将一个名为’magazine’的DIV元素标记为翻页容器，包含四个名为turn-page的子DIV。’data-placeholder’属性代表了翻页内容的替换文本，而每个翻页内容将在用户进行页面翻转时动态加载。 .turn()方法初始化Turn.js，启用翻页效果。

二、如何实现自动翻页

Turn.js允许你为页面设置自动翻页。要启用自动翻页，你可以使用“auto”选项，它指定页面在多长时间后自动翻转到下一页。以下是如何设置自动翻页的示例代码:

$('.magazine').turn({
    //设置每5秒自动翻页                  
    auto: 5000
});

三、缩略图

Turn.js中内置了缩略图功能，这使得用户可以轻松浏览包含大量页面的杂志或册子。以下示例代码演示了如何添加缩略图:

$('.magazine').turn({
    //将缩略图添加到页面上
    display: 'double',
    acceleration: true,
    gradients: true,
    elevation:50,
    when: {
      turned: function(e, page) {
        // 更新缩略图当前显示的页面
        $('#slider').slider('value', page);
      }
    }
});

四、鼠标和键盘控制

Turn.js允许你使用键盘或鼠标来控制页面，方便用户的操作。以下是支持键盘和鼠标的示例代码:

$('.magazine').turn({
    //启用键盘和鼠标控制
    keyboard: true,
    mouse: true,
    //设置辅助工具提示
    tooltips: {
        //设置左右翻页的快捷键为←和→
      next: 'Press →',
      //由于HTML实体化，这里需要用←表示左箭头
      prev: 'Press ←'
    }
});

五、组合使用Turn.js和其他库

Turn.js可以与其他JavaScript库相结合，从而增强其功能。

例如，Turn.js可以与jQuery UI库相结合，从而使 Turn.js 具有拖动和缩放功能。以下示例代码演示了如何将 Turn.js 和 jQuery UI 库组合在一起:

&lthtml>
&lthead>
  <title>Turn.js Example</title>
  <script src="jquery.min.js"></script>
  <script src="jquery-ui.min.js"></script>
  <link rel="stylesheet" href="jquery-ui.min.css">
  <script src="turn.min.js"></script>
  <link rel="stylesheet" href="basic.css">
</head>
<body>
  <div class="magazine">
    <div class="turn-page" data-placeholder="Page 1"></div>
    <div class="turn-page" data-placeholder="Page 2"></div>
    <div class="turn-page" data-placeholder="Page 3"></div>
    <div class="turn-page" data-placeholder="Page 4"></div>
  </div>
  <script>
      //初始化轮廓
    $('.magazine').turn({
      acceleration: true
    });
      //初始化缩放
    $('.magazine-viewport').zoom({
      flipbook: $('.magazine'),
      max: function() { 
        return 2;
      },
      when: {
        swipeLeft: function() {
          $(this).zoom('flipbook').turn('next');
        },
        swipeRight: function() {
          $(this).zoom('flipbook').turn('previous');
        },
        resize: function(event, scale, page, pageElement) {
          if (scale==1)
            loadSmallPage(page, pageElement);
          else
            loadLargePage(page, pageElement);
        },
        zoomIn: function () {
          $('.thumbnails').hide();
          $('.toolbar').hide();
          $('.made').hide();
          $('.flipbook-bg').css({'visibility': ''});
        },
        zoomOut: function () {
          $('.thumbnails').fadeIn();
          $('.toolbar').fadeIn();
          $('.made').fadeIn();
          $('.flipbook-bg').css({'visibility': 'hidden'});
        }
      }
    });
  </script>
</body>
</html>

在这个示例中，我们初始化了 Turn.js 轮廓、缩放和 jQuery UI 库。然后，我们将缩放器与轮廓绑定，启用缩放之后，通过缩放器的回调函数，我们可以动态地更新页面。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/303516.html