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>

jQuery

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

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

由于我已将活动簿包装到一个容器中，因此我目前正在为两个事件选择一个容器，因此我想实现的目标是，当您单击书的左侧时，它将切换到上一页，并且当我单击右侧时，它将切换到下一页。

Answer 1

使用turn.js创建活动簿时，每个页面都有// Smooth Scrolling $('#navbar a, .btn').on('click', function (event) { if (this.href !== '') { event.preventDefault(); const hash = this.href; $('html, body').animate({ scrollTop: $(hash).offset().top - 100 }, 800 ); } });或.odd类。
您可以使用它创建点击事件，以转到下一页或上一页：

.even

如何使turn.js页面“可点击”

1 个答案: