借助 插件 lavalamp实现导航条动态显示效果， 以前用animate来实现，效果不是很好
复制代码 代码如下:
首 页
个人版
中小版
企业版
服务与价格
关于我们
登 录 注 册
//// ------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 = $('
').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/