快捷導航

jQuery實現(xiàn)背景滑動菜單

更新時間：2016年12月02日 17:16:08 作者：船長op

本篇文章分享了基于jQuery實現(xiàn)背景滑動菜單的實例代碼。感興趣的朋友可以下載實例運行，下面就跟小編一起來看看吧

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

<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();//獲取第一個li的寬
 var $slide = $(this).children("div"); 
 $slide.css({"width":liw,"left":"5"});
 //懸停時執(zhí)行動畫
 function hani(w,l){
 $slide.stop(true) //很關(guān)鍵的一句話，當懸停時，讓正在執(zhí)行的動畫，和列隊中的動畫，都取消；防止鼠標不?；瑒訒r的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);
 } 
 //離開時執(zhí)行動畫 
 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(); //獲取當前l(fā)i的寬
 var l = $(this).position().left; //獲取當前l(fā)i的橫坐標 
 if(!$(this).index()==0){ //鼠標懸停在第一個LI時，不發(fā)生動畫
 hani(w,l);
 }
 },function(){
 oani();
 });
 } 
 })
})(jQuery);

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

　　div：放置一個背景圖層，相對定位；

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

　　div：放置滑動的背景層，絕對定位；

JQuery思路分析：

　　鼠標懸停到每一個LI的時候，讓這個滑動的背景層，通過水平移動動畫，來定位到當前這個LI的地方；并有一個左右晃動效果；鼠標離開時，讓背景層滑動到初始位置；

鼠標懸停時：

　　1.獲取當前LI相對于最外層DIV的水平坐標，即橫坐標值；

　　2.讓滑動的背景層的橫坐標正好等于當前LI的橫坐標;

　　3.執(zhí)行一個左右晃動的動畫，即改變當前水平坐標的值;

鼠標離開時：

　　1.讓背景層滑動到初始位置，即改變橫坐標的值，為初始值；