jQuery书本翻页特效

当前位置:主页 > jQuery库 > 布局和界面 > jQuery书本翻页特效
jQuery书本翻页特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2019-11-15
    阅读:
简要教程

这是一款支持移动触摸的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();
}
                

该jQuery书本翻页特效的codepen网址为:https://codepen.io/timohausmann/pen/xdKkA