分享一款效果非常炫酷的谷歌 Material Design 风格jQuery和CSS3滑动选项卡特效。该选项卡特效集合了扁平风格设计和按钮点击波特效。是一款设计的非常不错的Material Design 风格作品。效果图如下:在线预览 源码下载实现的代码。h ...
分享一款效果非常炫酷的谷歌 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
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。