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>复制

js代码

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();}复制