借助 插件 Lavalamp实现导航条动态显示效果， 以前用animate来实现，效果不是很好
[url=http://www.uuspeed.com/]<ul class="nav">
<li class="current"><a href="#">首 页</a></li>
<li class="1"><a href="#">个人版</a></li>
<li class="2"><a href="#">中小版</a></li>
<li class="3"><a href="#">企业版</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);
效果见http://www.uuspeed.com/
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
