手风琴

jQuery+CSS3手风琴样式分步向导特效

阿里云

这是一款非常实用的 jQuery 和 CSS3 手风琴样式分步向导特效。该分步向导在页面初始化时只显示第一个手风琴项,在用户点击了“继续”按钮之后,会平滑过渡到第二个手风琴项,最终引导用户完成所有的步骤。

HTML 结构:

该用户向导的 HTML 结构使用无序列表的 HTML 结构,每一个手风琴项是一个 li 元素。

也想出现在这里?联系我们
创客主机
  1. <div class="container">
  2.   <ul class="payment-wizard">
  3.       <li class="active">
  4.         <div class="wizard-heading">
  5.             1. Login Information
  6.               <span class="icon-user"></span>
  7.           </div>
  8.           <div class="wizard-content">
  9.             <p>Create your Login Form here as per your requirement.</p>
  10.             <button class="btn-green done" type="submit">Continue</button>
  11.           </div>
  12.       </li>
  13.       ......
  14.     </ul>
  15. </div>

CSS 样式:

该用户向导的 CSS 样式比较简单,其中每个手风琴项都带有一些好看的阴影效果。

  1. .wizard-content{
  2.   display: none; 
  3.   float: left; 
  4.   width: 100%; 
  5.   background-color: #fff; 
  6.   box-shadow: 0 8px 8px #d2d2d2; 
  7.   padding: 15px; 
  8.   box-sizing: border-box;
  9. }

另外按钮被制作为 3D 效果,这主要通过:before 伪元素来制作按钮的底部阴影效果,用于模拟立体的感觉。

  1. .btn-green{
  2.   color: #fff; 
  3.   float: right; 
  4.   border: 0; 
  5.   padding: 7px 10px; 
  6.   min-width: 92px; 
  7.   z-index: 1; 
  8.   cursor: pointer; 
  9.   font-size: 14px; 
  10.   text-transform: uppercase; 
  11.   background-color: #5fba57; 
  12.   border-radius: 3px; 
  13.   border-bottom: 3px solid #289422; 
  14.   position: relative; 
  15.   transition: 0.3s;
  16. }
  17. .btn-green:before{
  18.   content: ""; 
  19.   width: 100%; 
  20.   height: 0; 
  21.   border-radius: 3px; 
  22.   z-index: -1; 
  23.   position: absolute; 
  24.   left: 0; 
  25.   bottom: 0; 
  26.   background-color: #289422; 
  27.   transition: 0.3s;
  28. }
  29. .btn-green:hover:before{height: 100%;}

JavaScript 代码:

该用户向导插件使用 jQuery 代码来完成相应元素的 class 类的添加和移除,以及手风琴项的展开和收缩动画。

  1. $(window).load(function(){  
  2.   $(".done").click(function(){
  3.     var this_li_ind = $(this).parent().parent("li").index();
  4.     if($('.payment-wizard li').hasClass("jump-here")){
  5.       $(this).parent().parent("li").removeClass("active").addClass("completed");
  6.       $(this).parent(".wizard-content").slideUp();
  7.       $('.payment-wizard li.jump-here').removeClass("jump-here");
  8.     }else{
  9.       $(this).parent().parent("li").removeClass("active").addClass("completed");
  10.       $(this).parent(".wizard-content").slideUp();
  11.       $(this).parent().parent("li").next("li:not('.completed')")
  12.             .addClass('active').children('.wizard-content').slideDown();
  13.     }
  14.   });
  15.  
  16.   $('.payment-wizard li .wizard-heading').click(function(){
  17.     if($(this).parent().hasClass('completed')){
  18.       var this_li_ind = $(this).parent("li").index();   
  19.       var li_ind = $('.payment-wizard li.active').index();
  20.       if(this_li_ind < li_ind){
  21.         $('.payment-wizard li.active').addClass("jump-here");
  22.       }
  23.       $(this).parent().addClass('active').removeClass('completed');
  24.       $(this).siblings('.wizard-content').slideDown();
  25.     }
  26.   });
  27. })

jQuery+CSS3 手风琴样式分步向导特效

已有 348 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

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