jQuery鼠标悬停上下滑动导航条

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航</title> <style type="text/css"> body{margin:0px;padding:0px;font-family:"微软雅黑", "宋体";font-size:12px;color:#CCCCCC;} .cls{clear:both;} a:focus{outline:none;} .menu{height:48px;display:block;padding:0px;width:999px;margin:40px auto 0 auto;} .menu ul{list-style:none;padding:0;margin:0;} .menu ul li{float:left;overflow:hidden;position:relative;line-height:48px;text-align:center;} .menu ul li a{position:relative;display:block;width:111px;height:48px;font-family:"微软雅黑", "宋体";font-size:14px;text-decoration:none;cursor:pointer;font-weight:bold;line-height:48px;} .menu ul li a span{position:absolute;left:0;width:111px;} .menu ul li a span.out{top:0px;} .menu ul li a span.over, .menu ul li a span.bg{top:-48px;} #menu2{background-image:url(http://www.w2bc.com/demo/201506/2015-06-03-jquery-nav-hover/images/s_03.jpg);background-repeat:repeat;} #menu2 ul li a{color:#FFFFFF;} #menu2 ul li a span.over{color:#FFF;height:48px;width:111px;background-image:url(http://www.w2bc.com/demo/201506/2015-06-03-jquery-nav-hover/images/w_03.jpg);background-repeat:repeat;} </style> </head> <body> <div id="menu2" class="menu"> <ul> <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> <li><a href="#">信息公开</a></li> <li><a href="#">气象科普</a></li> <li><a href="#">党风廉政</a></li> <li><a href="#">气象科普</a></li> </ul> <div class="cls"> </div> </div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#menu2 li a").wrapInner('<span class="out"></span>'); $("#menu2 li a").each(function () { $('<span class="over">' + $(this).text() + '</span>').appendTo(this); }); $("#menu2 li a").hover(function () { $(".out", this).stop().animate({ 'top': '48px' }, 300); // move down - hide $(".over", this).stop().animate({ 'top': '0px' }, 300); // move down - show }, function () { $(".out", this).stop().animate({ 'top': '0px' }, 300); // move up - show $(".over", this).stop().animate({ 'top': '-48px' }, 300); // move up - hide }); }); </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » jQuery鼠标悬停上下滑动导航条