你的位置:首页 > 软件开发 > Java > 基于jQuery和CSS3超酷Material Design风格滑动菜单导航特效

基于jQuery和CSS3超酷Material Design风格滑动菜单导航特效

发布时间:2015-05-20 11:02:40
分享一款效果非常炫酷的谷歌 Material Design 风格jQuery和CSS3滑动选项卡特效。该选项卡特效集合了扁平风格设计和按钮点击波特效。是一款设计的非常不错的Material Design 风格作品。效果图如下:在线预览 源码下载实现的代码。h ...

基于jQuery和CSS3超酷Material Design风格滑动菜单导航特效

分享一款效果非常炫酷的谷歌 Material Design 风格jQuery和CSS3滑动选项卡特效。该选项卡特效集合了扁平风格设计和按钮点击波特效。是一款设计的非常不错的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='/images/loading.gif' data-original="http://www.cnblogs.com//scripts/2bc/_gg_980_90.js" type="text/javascript"></script>  </div>  <script src='/images/loading.gif' data-original="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>

原标题:基于jQuery和CSS3超酷Material Design风格滑动菜单导航特效

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。