其他代码

炫酷3D杂志书本翻页jQuery特效

也想出现在这里?联系我们
面包多

炫酷3D杂志书本翻页jQuery特效-创客云
这是一款支持移动触摸的 jQuery 书本翻页特效。该特效通过简单的 css 和 js 代码,既可以生成书本或杂志翻页的炫酷 3D 特效。
使用方法
在页面中引入下面的文件

  1. <script src="js/jquery.min.js" type="text/javascript"></script>
  2. <script src="js/jquery.hammer.min.js" type="text/javascript"></script>
也想出现在这里?联系我们
创客主机

HTML 结构

也想出现在这里?联系我们
创客主机

  1. <div class="scene">
  2.   <article class="book">
  3.     <section class="page active">
  4.       <div class="front">
  5.         <h1>Book/Page Flip Effect</h1>
  6.         <p>A tiny jQuery script to create a mobile-friendly 3D page flip effect.</p>
  7.       </div>
  8.       <div class="back">
  9.         <h1>– 1 –</h1>
  10.         <p>Page 1</p>
  11.       </div>
  12.     </section>
  13.     <section class="page">
  14.       <div class="front">
  15.         <h1>– 2 –</h1>
  16.         <p>Page 2
  17.         </p>
  18.       </div>
  19.       <div class="back">
  20.         <h1>– 3 –</h1>
  21.         <p>Page 3</p>
  22.       </div>
  23.     </section>
  24.       <section class="page">
  25.       <div class="front">
  26.         <h1>– 4 –</h1>
  27.         <p>Page 4</p>
  28.       </div>
  29.       <div class="back">
  30.         <h1>– 5 –</h1>
  31.         <p>Page 5</p>
  32.       </div>
  33.     </section>
  34.   </article>
  35. </div>

JavaScript

  1. var currentPage = 0;
  2. $('.book')
  3. .on('click', '.active', nextPage)
  4. .on('click', '.flipped', prevPage);
  5.  
  6. $('.book').hammer().on("swipeleft", nextPage);
  7. $('.book').hammer().on("swiperight", prevPage);
  8.  
  9. function prevPage() {
  10.  
  11.   $('.flipped')
  12.     .last()
  13.     .removeClass('flipped')
  14.     .addClass('active')
  15.     .siblings('.page')
  16.     .removeClass('active');
  17. }
  18. function nextPage() {
  19.  
  20.   $('.active')
  21.     .removeClass('active')
  22.     .addClass('flipped')
  23.     .next('.page')
  24.     .addClass('active')
  25.     .siblings();
  26. }

Codepen 网址:https://codepen.io/timohausmann/pen/xdKkA

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(1)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Tabula - 艺术音乐外语培训学校网站WordPress模板

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!