jQuery 借助插件Lavalamp實現導航條動態(tài)美化效果

更新時間：2013年09月27日 17:43:50 作者：

導航條動態(tài)顯示效果借助插件Lavalamp可以輕松實現,以前用animate來實現，效果不是很好

借助插件 Lavalamp實現導航條動態(tài)顯示效果，以前用animate來實現，效果不是很好

 
<script src="js/jquery-2.0.0.min.js" type="text/javascript"></script> 
<script src="js/jquery.easing.min.js" type="text/javascript"></script> 
<script src="js/jquery.lavalamp.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function() { 
$(".nav").lavaLamp({ 
fx: "backout", 
speed: 1100, 
mouseover:function(event, menuItem){alert();} 
}); 
}); 

</script> 

<style> 

.nav { 
width:650px; 
height:100px; 
float:left; 
position: relative; 
} 
.nav li { 
width:auto; 
min-width:40px; 
line-height:100px; 
padding:0 15px; 
margin:0 10px 0 0; 
color:#000; 
font-size:14px; 
text-align:center; 
float:left; 
} 
.nav li.back { 
background: #86bf40; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
line-height: 2; 
width: 40px; 
height: 100px; /*----*/ 
z-index: 1; /*----*/ 
position: absolute; /*----*/ 
margin-top: 0px; 
margin-left:5px; 
} 
.nav li a { 
color: #000; 
z-index: 2; /*----*/ 
font-variant: small-caps; 
text-decoration: none; 
position: relative; /*----*/ 
margin: auto 10px; 
} 

</style> 
</head> 

<body> 
<!-- header --> 
<div class="headerbox"> 
<div class="header"> <a  class="logo"><img src="images/logo.png" alt="優(yōu)速云" /></a> 
<ul class="nav"> 
<li class="current"><a href="#">首&nbsp;頁</a></li> 
<li class="1"><a href="#">個人版</a></li> 
<li class="2"><a href="#">中小版</a></li> 
<li class="3"><a href="#">企業(yè)版</a></li> 
<li class="4"><a href="#">服務與價格</a></li> 
<li class="5"><a href="#">關于我們</a></li> 
</a> 
</ul> 
<div class="login"> <a href="" class="icon_login">登 錄</a> <a href="" class="icon_login">注 冊</a> </div> 
</div> 
</div> 


</body> 

</html> 

//// ------lavalamp.js文件修改--------------

復制代碼代碼如下:

 
(function($) { 
$.fn.lavaLamp = function(o) { 
o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {}); 


return this.each(function() { 
var me = $(this), 
noop = function(el){ 

}, 
$back = $('<li class="back"><div class="left"></div></li>').appendTo(me), 
$li = $("li", this), 
curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0]; 


$li.not(".back").hover(function() { move(this);}); 


$(".nav li:eq(0) a").css("color","#FFF"); 
function setCurr(el) {alert(el.offsetWidth); 
$back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" }); 
curr = el; 

}; 

function move(el) { 
$back.each(function() { 
$.dequeue(this, "fx"); } 
).animate({ 
width: el.offsetWidth-40, 
left: el.offsetLeft 
}, o.speed, o.fx,function(){ 
var a0=$(".nav li:eq(0) a"); 
var a1=$(".nav li:eq(1) a"); 
var a2=$(".nav li:eq(2) a"); 
var a3=$(".nav li:eq(3) a"); 
var a4=$(".nav li:eq(4) a"); 
var a5=$(".nav li:eq(5) a"); 
if(el.offsetLeft==0){ 
$(".nav li:eq(0) a").css("color","#FFF"); 
a1.css("color","#000"); 
a2.css("color","#000"); 
a3.css("color","#000"); 
a4.css("color","#000"); 
a5.css("color","#000"); 
} 
if(el.offsetLeft==92){ 
$(".nav li:eq(1) a").css("color","#FFF"); 
a0.css("color","#000"); 
a2.css("color","#000"); 
a3.css("color","#000"); 
a4.css("color","#000"); 
a5.css("color","#000"); 
} 
if(el.offsetLeft==194){ 
$(".nav li:eq(2) a").css("color","#FFF"); 
a1.css("color","#000"); 
a0.css("color","#000"); 
a3.css("color","#000"); 
a4.css("color","#000"); 
a5.css("color","#000"); 
} 
if(el.offsetLeft==296){ 
$(".nav li:eq(3) a").css("color","#FFF"); 
a1.css("color","#000"); 
a2.css("color","#000"); 
a0.css("color","#000"); 
a4.css("color","#000"); 
a5.css("color","#000"); 
} 
if(el.offsetLeft==398){ 
$(".nav li:eq(4) a").css("color","#FFF"); 
a1.css("color","#000"); 
a2.css("color","#000"); 
a3.css("color","#000"); 
a0.css("color","#000"); 
a5.css("color","#000"); 
} 
if(el.offsetLeft==528){ 
$(".nav li:eq(5) a").css("color","#FFF"); 
a1.css("color","#000"); 
a2.css("color","#000"); 
a3.css("color","#000"); 
a4.css("color","#000"); 
a0.css("color","#000"); 
} 
}); 
}; 


}); 

}; 
})(jQuery); 