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/zh-hant/n/303516.html