jQuery实现背景滑动菜单
话不多说，直接附上源码，仅供大家参考
<divclass="menu"> <ulid="menu"> <li><ahref="#">JavaScript</a></li> <livalue="1"><ahref="#">GraphicDesign</a></li> <li><ahref="#">HTML</a></li> <li><ahref="#">UserInterface</a></li> <li><ahref="#">CSS</a></li> </ul> <divid="slide"></div> </div>
*{margin:0;padding:0}
body{font:14pxHelvetica,sans-serif;font-weight:bold;background:#FFF}
.menu{position:relative;background:url(images/bg.gif)no-repeat;height:35px;width:459px}
.menuul{list-style:none;z-index:10;position:absolute;z-index:100;padding:9px5px}
.menuli{float:left}
.menua,.menua:active,.menua:visited,.menua: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);
//初始化背景的位置
varliw=$("ulli:eq(0)",value.menu).width();//获取第一个li的宽
var$slide=$(this).children("div");
$slide.css({"width":liw,"left":"5"});
//悬停时执行动画
functionhani(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);
}
//离开时执行动画
functionoani(){
$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);;
}
$("ulli",this).hover(function(){
varw=$(this).width();//获取当前li的宽
varl=$(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地址：http://xiazai.jb51.net/yuanma/myslidebgmenu(jb51.net).rar
以上就是本文的全部内容，希望对大家有所帮助，谢谢对毛票票的支持！