<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery仿百度新闻网站导航条特效</title> <style type="text/css"> *{ margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; } #wrap{ width: 100%; height: 40px; border:1px solid ; margin: 100px 0; background: #01204f; } #content ul{ width: 980px; height: 40px; margin: auto; position: relative; } ul li{ list-style: none; float: left; position: relative; z-index: 5; /*width: 60px;*/ /*text-align: center;*/ } ul li a{ text-decoration: none; color: white; font-size: 14px; line-height: 40px; padding: 0 10px; margin-right: 2px; } #slider{ width: 50px; height: 40px; background: #c00; position: absolute; top: 0; left: 0; /*opacity: 0.8;*/ } </style> </head> <body> <div id="wrap"> <div id = ‘content‘> <ul> <div id = "slider"></div> <li style="background: #CC0000;"><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> <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> </div> <script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $("li").mouseenter(function(){ $("#slider").animate({ left:$(this).offset().left-$(‘li‘).eq(0).offset().left, },50) $("#slider").css({ width:$(this).width(), }) }) $("ul").mouseleave(function(){ $("#slider").css({ width:‘50‘, }) $("#slider").animate({ left:"0", },200) }) </script> </div> </body> </html>