如何使 turn.js 頁面“可點擊”

Question

我目前正在使用 turn.js 來創建翻書。 目前我正試圖弄清楚如何使頁面可點擊，以便當您將鼠標懸停在頁面上時它會更改為下一頁或上一頁。

我試過搜索有類似問題的主題，但到目前為止沒有運氣，我也檢查了 turn.js 的官方文檔，但到目前為止，一無所獲。 問題是：有沒有辦法選擇頁面並為它們提供 .previous 或 .next 之類的類以獲得所需的效果？

HTML

<div class="container">
    <div id="flipbook">
        <div class="hard">Headline</div>
        <div class="hard"></div>
        <div>Chapter 1</div>
        <div>Chapter 2</div>
        <div>Chapter 3</div>
        <div>The End</div>
        <div class="hard"></div>
        <div class="hard"></div>
    </div>
</div>

查詢

$( ".container" ).click(function() {
  $("#flipbook").turn("next");
});

$( ".container" ).click(function() {
 $("#flipbook").turn("previous");
});

由於我已將翻書包裝到一個容器中，因此我目前正在為這兩個事件選擇一個容器，我想要實現的是，當您單擊書的左側時，它會切換到上一頁，當我單擊時右側，它切換到下一頁。

Answer 1

當您使用turn.js創建一個動畫書，每一頁都有.odd或.even類。
您可以使用它來創建點擊事件，以轉到下一頁或上一頁：

$('#flipbook .even').each(function() {
   $(this).parents().eq(1).click(function() { $("#flipbook").turn("previous") });
}) 

$('#flipbook .odd').each(function() {
   $(this).parents().eq(1).click(function() { $("#flipbook").turn("next") });
})

Answer 2

我正在處理 128 頁動態加載的翻書，這需要及時的事件綁定，因為循環瀏覽頁面效率較低。 因此，在更廣泛的范圍內，我使用了它。

$(function() {

  $(document).on("click", "#flipbook .even", function(event) {
     $("#flipbook").turn("previous");
  });

  $(document).on("click", " #flipbook .odd", function(event) {
     $("#flipbook").turn("next");
  });

});

這會自動綁定到新創建的頁面並避免需要循環。