jQuery书本翻页特效

详情内容

这是一款支持移动触摸的jQuery书本翻页特效。该特效通过简单的css和js代码，既可以生成书本或杂志翻页的炫酷3D特效。

使用方法

在页面中引入下面的文件。

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.hammer.min.js" type="text/javascript"></script>

HTML结构

<div class="scene">
  <article class="book">
    <section class="page active">
      <div class="front">
        <h1>Book/Page Flip Effect</h1>
        <p>A tiny jQuery script to create a mobile-friendly 3D page flip effect.</p>
      </div>
      <div class="back">
        <h1>– 1 –</h1>
        <p>Page 1</p>
      </div>
    </section>
    <section class="page">
      <div class="front">
        <h1>– 2 –</h1>
        <p>Page 2
        </p>
      </div>
      <div class="back">
        <h1>– 3 –</h1>
        <p>Page 3</p>
      </div>
    </section>
      <section class="page">
      <div class="front">
        <h1>– 4 –</h1>
        <p>Page 4</p>
      </div>
      <div class="back">
        <h1>– 5 –</h1>
        <p>Page 5</p>
      </div>
    </section>
  </article>
</div>

JavaScript

var currentPage = 0;
$('.book')
.on('click', '.active', nextPage)
.on('click', '.flipped', prevPage);

$('.book').hammer().on("swipeleft", nextPage);
$('.book').hammer().on("swiperight", prevPage);

function prevPage() {
  
  $('.flipped')
    .last()
    .removeClass('flipped')
    .addClass('active')
    .siblings('.page')
    .removeClass('active');
}
function nextPage() {
  
  $('.active')
    .removeClass('active')
    .addClass('flipped')
    .next('.page')
    .addClass('active')
    .siblings();
}