你的位置:首页 > Java教程

[Java教程]基于jQuery和CSS3超酷Material Design风格滑动菜单导航特效


分享一款效果非常炫酷的谷歌 Material Design 风格jQuery和CSS3滑动选项卡特效。该选项卡特效集合了扁平风格设计和按钮点击波特效。是一款设计的非常不错的Material Design 风格作品。效果图如下:

在线预览    源码下载

实现的代码。

hmtl代码:

 <div class="htmleaf-container">    <br />    <br />    <br />    <div class="htmleaf-content bgcolor-3">      <ul>        <li>Tab One</li>        <li>Tab Two</li>        <li>Tab Three</li>        <li class="slider"></li>      </ul>    </div>    <script src="http://www.cnblogs.com//scripts/2bc/_gg_980_90.js" type="text/javascript"></script>  </div>  <script src="http://libs.useso.com/js/jquery/1.11.0/jquery.min.js"></script>  <script>    $("ul li").click(function (e) {      // make sure we cannot click the slider      if ($(this).hasClass('slider')) {        return;      }      /* Add the slider movement */      // what tab was pressed      var whatTab = $(this).index();      // Work out how far the slider needs to go      var howFar = 160 * whatTab;      $(".slider").css({        left: howFar + "px"      });      /* Add the ripple */      // Remove olds ones      $(".ripple").remove();      // Setup      var posX = $(this).offset().left,     posY = $(this).offset().top,     buttonWidth = $(this).width(),     buttonHeight = $(this).height();      // Add the element      $(this).prepend("<span class='ripple'></span>");      // Make it round!      if (buttonWidth >= buttonHeight) {        buttonHeight = buttonWidth;      } else {        buttonWidth = buttonHeight;      }      // Get the center of the element      var x = e.pageX - posX - buttonWidth / 2;      var y = e.pageY - posY - buttonHeight / 2;      // Add the ripples CSS and start the animation      $(".ripple").css({        width: buttonWidth,        height: buttonHeight,        top: y + 'px',        left: x + 'px'      }).addClass("rippleEffect");    });  </script>

css代码:

body {   font-family: 'Raleway', sans-serif;   /*background: #2C3E50;*/  }  ul {   font-size: 0;   position: relative;   padding: 0;   width: 480px;   margin: 40px auto;   -webkit-user-select: none;   -moz-user-select: none;   -ms-user-select: none;   user-select: none;  }  li {   display: inline-block;   width: 160px;   height: 60px;   background: #DA4453;   font-size: 16px;   text-align: center;   line-height: 60px;   color: #fff;   text-transform: uppercase;   position: relative;   overflow: hidden;   cursor: pointer;  }  .slider {   display: block;   position: absolute;   bottom: 0;   left: 0;   height: 4px;   background: #46CFB0;   -webkit-transition: all 0.5s;   transition: all 0.5s;  }  /* Ripple */  .ripple {   width: 0;   height: 0;   border-radius: 50%;   background: rgba(255, 255, 255, 0.4);   -webkit-transform: scale(0);   -ms-transform: scale(0);   transform: scale(0);   position: absolute;   opacity: 1;  }  .rippleEffect {   -webkit-animation: rippleDrop .6s linear;   animation: rippleDrop .6s linear;  }   @-webkit-keyframes   rippleDrop { 100% {   -webkit-transform: scale(2);   transform: scale(2);   opacity: 0;  }  }   @keyframes   rippleDrop { 100% {   -webkit-transform: scale(2);   transform: scale(2);   opacity: 0;  }  }

via:http://www.w2bc.com/Article/38841