jQuery滑动导航菜单
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta name="author" content="abangsir" /> <title>jQuery弹性滑动导航菜单</title> <style type="text/css"> body{ font-family:"Microsoft YaHei";} .lavalamp{ width:700px; float:right; position: relative;} .lavalamp ul{ height: 35px; width: 100%; margin:17px 20px 0 0; position: absolute; z-index: 9999; overflow: hidden;} .lavalamp ul li{ cursor: pointer; height: 35px; line-height:35px; font-size:20px; background: none; font-weight:bold; float:left; text-align: center;} .lavalamp ul li a{ text-decoration: none; padding: 0 13px; text-align: center; display: block; background: none;} .floatr { position: absolute; top: 15px; width: 107px; height: 40px; border-radius : 8px; -moz-border-radius : 8px; -webkit-border-radius : 8px; background : rgba(0,0,0,.20); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; } </style> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(document).ready(function () { var active_width = $(".active").innerWidth(); var active_left = $(".active").position().left; $(".floatr").css( { width:active_width, left:active_left } ); $(".lavalamp ul>li").hover( function(){ var width = $(this).innerWidth(); var left = $(this).position().left; $(".floatr").stop().animate( { width: width, left: left }, 300 ); }, function(){ $(".floatr").stop().animate( { width: active_width, left: active_left } ); } ); }); </script> </head> <body> <div class="lavalamp"> <ul> <li class="active"><a href="#">新品上市</a></li> <li><a href="#">畅销精品</a></li> <li><a href="#">推荐礼品</a></li> <li><a href="#">知名品牌</a></li> <li><a href="#">工艺礼品</a></li> <li><a href="#">回到首页</a></li> </ul> <div class="floatr"></div> </div> </body> </html>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。