话不多说，直接附上源码，仅供大家参考
<div> <ul id="menu"> <li><a href="#">JavaScript</a></li> <li value="1"><a href="#">Graphic Design</a></li> <li><a href="#">HTML</a></li> <li><a href="#">User Interface</a></li> <li><a href="#">CSS</a></li> </ul> <div id="slide"></div> </div>
* {margin:0; padding:0} body {font:14px Helvetica, sans-serif; font-weight:bold; background:#FFF} .menu {position:relative; background:url(images/bg.gif) no-repeat; height:35px; width:459px} .menu ul {list-style:none; z-index:10; position:absolute; z-index:100; padding:9px 5px} .menu li {float:left} .menu a, .menu a:active, .menu a:visited, .menu a:hover {text-decoration:none; color:#FFF; padding:10px} #slide {position:absolute; top:6px; height:24px; background:#89957a; z-index:10;}
(function($){ $.fn.extend({ bgslide:function(value){ //可选参数 value=$.extend({ "fw":12, "sw":2, "ftime":100, "stime":300 },value); //初始化背景的位置 var liw = $("ul li:eq(0)",value.menu).width();//获取第一个li的宽 var $slide = $(this).children("div"); $slide.css({"width":liw,"left":"5"}); //悬停时执行动画 function hani(w,l){ $slide.stop(true) //很关键的一句话，当悬停时，让正在执行的动画，和列队中的动画，都取消；防止鼠标不停滑动时的bug; .animate({"width":w,"left":l+value.fw},value.ftime) .animate({"left":l-value.fw},value.stime) .animate({"left":l+value.sw},value.stime) .animate({"left":l-value.sw},value.stime); } //离开时执行动画 function oani(){ $slide.stop(true) .animate({"width":liw,"left":"5"},value.ftime) .animate({"left":l-value.fw},value.stime) .animate({"left":l+value.sw},value.stime) .animate({"left":l-value.sw},value.stime);; } $("ul li",this).hover(function(){ var w = $(this).width(); //获取当前li的宽 var l = $(this).position().left; //获取当前li的横坐标 if(!$(this).index()==0){ //鼠标悬停在第一个LI时，不发生动画 hani(w,l); } },function(){ oani(); }); } }) })(jQuery);
html结构思路：
div：放置一个背景图层，相对定位；
UL：放置菜单内容，绝对定位;
div：放置滑动的背景层，绝对定位；
JQuery思路分析：
鼠标悬停到每一个LI的时候，让这个滑动的背景层，通过水平移动动画，来定位到当前这个LI的地方；并有一个左右晃动效果；鼠标离开时，让背景层滑动到初始位置；
鼠标悬停时：
1.获取当前LI相对于最外层DIV的水平坐标，即横坐标值；
2.让滑动的背景层的横坐标正好等于当前LI的横坐标;
3.执行一个左右晃动的动画，即改变当前水平坐标的值;
鼠标离开时：
1.让背景层滑动到初始位置，即改变横坐标的值，为初始值；
下载：Demo
以上就是本文的全部内容，希望对大家有所帮助，谢谢对查字典教程网的支持！