話不多說(shuō)，直接附上源碼，僅供大家參考

<div class="menu"> <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){ //可選參數(shù) value=$.extend({ "fw":12, "sw":2, "ftime":100, "stime":300 },value); //初始化背景的位置 var liw = $("ul li:eq(0)",value.menu).width();//獲取第一個(gè)li的寬 var $slide = $(this).children("div");  $slide.css({"width":liw,"left":"5"}); //懸停時(shí)執(zhí)行動(dòng)畫(huà) function hani(w,l){ $slide.stop(true) //很關(guān)鍵的一句話，當(dāng)懸停時(shí)，讓正在執(zhí)行的動(dòng)畫(huà)，和列隊(duì)中的動(dòng)畫(huà)，都取消；防止鼠標(biāo)不停滑動(dòng)時(shí)的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); }  //離開(kāi)時(shí)執(zhí)行動(dòng)畫(huà)  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(); //獲取當(dāng)前l(fā)i的寬 var l = $(this).position().left; //獲取當(dāng)前l(fā)i的橫坐標(biāo)  if(!$(this).index()==0){ //鼠標(biāo)懸停在第一個(gè)LI時(shí)，不發(fā)生動(dòng)畫(huà) hani(w,l); } },function(){ oani(); }); }  })})(jQuery);

html結(jié)構(gòu)思路：

　　div：放置一個(gè)背景圖層，相對(duì)定位；

　　UL：放置菜單內(nèi)容，絕對(duì)定位;

　　div：放置滑動(dòng)的背景層，絕對(duì)定位；

JQuery思路分析：

　　鼠標(biāo)懸停到每一個(gè)LI的時(shí)候，讓這個(gè)滑動(dòng)的背景層，通過(guò)水平移動(dòng)動(dòng)畫(huà)，來(lái)定位到當(dāng)前這個(gè)LI的地方；并有一個(gè)左右晃動(dòng)效果；鼠標(biāo)離開(kāi)時(shí)，讓背景層滑動(dòng)到初始位置；

鼠標(biāo)懸停時(shí)：

　　1.獲取當(dāng)前LI相對(duì)于最外層DIV的水平坐標(biāo)，即橫坐標(biāo)值；

　　2.讓滑動(dòng)的背景層的橫坐標(biāo)正好等于當(dāng)前LI的橫坐標(biāo);

　　3.執(zhí)行一個(gè)左右晃動(dòng)的動(dòng)畫(huà)，即改變當(dāng)前水平坐標(biāo)的值;

鼠標(biāo)離開(kāi)時(shí)：

　　1.讓背景層滑動(dòng)到初始位置，即改變橫坐標(biāo)的值，為初始值；

下載Demo地址：http://xiazai.VeVB.COm/yuanma/myslidebgmenu(VeVB.COm).rar

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家有所幫助，謝謝對(duì)武林網(wǎng)的支持！