jQuery书本翻页特效

jQuery书本翻页特效

jQuery书本翻页特效-小梁资源站
jQuery书本翻页特效
此内容为付费资源,请付费后查看
L币1
付费资源
!
也想出现在这里? 联系我们
信息

详情内容

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

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
喜欢就支持一下吧
点赞59 分享
评论 抢沙发

请登录后发表评论

    请登录后查看评论内容