根据自己的需求改进了下lavalamp插件

http://nixbox.com/projects/jquery-lavalamp/download.php

lavalamp下载原地址

需求是要达到http://www.adjust.be/home这个网站的导航效果。

太多JS没找到相应的js

于是只能自己修改lavalamp插件

首先引入js

<script src="${base}/res/common/js/jquery-1.7.2.min.js" type=text/javascript></script>
<script src="${base}/res/common/js/jquery.lavalamp-1.4.js" type=text/javascript></script>

更多效果还需要引入

<script src="${base}/res/common/js/jquery.easing.1.3.min.js" type=text/javascript></script>

页面：

<ul class="lavaLamp">
						<li id="navli1"><a href="${appBase}index.html#top">首    页</a></li>
						<li id="navli2"><a href="${appBase}index.html#product">产品中心</a></li>
						<li id="navli3"><a href="${appBase}index.html#application">商业应用</a></li>
		    			<li id="navli4"><a href="${appBase}index.html#news">资讯中心</a></li>
		  				<li id="navli5"><a href="${appBase}index.html#about">关于我们</a></li>
		  				<li id="navli6"><a href="${appBase}index.html#marketing">市场营销</a></li>   
		  				<li id="navli7"><a>联系方式</a></li>
		  				<li id="navli8"><a href="${appBase}index.html#mall">商    城</a></li>
					</ul>

css:

.lavaLamp{height: 81px;font-size: 14px;line-height: 81px;margin-left: auto;font-weight: bold;color: #444444;text-decoration: none;position: relative;}
.lavaLamp li{float: left;list-style-type: none;width: 82px;text-align: center;position:relative;}
.lavaLamp li.backLava{border-bottom: 7px solid #3e7caf;z-index: 1000;position: absolute;top:7px;}
.lavaLamp li a{font-size:15px;height:82px;width:82px;display:block;color:#444;z-index: 1001;font-variant:small-caps;text-decoration:none;position: relative;}

lavalamp官方注释里都写得非常清楚了。

我就是稍微改了下function move($el, cbType)函数以达到自己想要的效果

下载地址：

http://download.youkuaiyun.com/detail/ouyangbo100/7325359

http://download.youkuaiyun.com/detail/ouyangbo100/7325383

http://download.youkuaiyun.com/detail/ouyangbo100/7325397

使用改进后的lavalamp：

$(document).ready(function() {
$("#navli1").addClass("flag");
	$(".lavaLamp").lavaLamp({
		fx:"linear", 
		speed:100
	});
});

新修复了下animate积累bug。

function move($el, cbType) {
			
			if (cbType == 'return') {
				o.returnStart($el);
			} else {
				o.hoverStart($el);
			}
			
			if (!$el) $el = $selected;

			if (!o.includeMargins) {
				ml = (getInt($el.css('marginLeft')));
				mt = (getInt($el.css('marginTop')));
			}
			var flag;//标记位，标记鼠标位置
			if($(".flag").length>0){
				flag=$(".lavaLamp li").index($(".flag"));
			}else{
				flag=$(".lavaLamp li").index($(".selectedLava"));
			};
			var movewidth;
			var moveleft;
			moveleft=($(".flag").position().left<=$el.position().left ? $(".flag").position().left : $el.position().left);
			var n;
			n=$(".lavaLamp li").index($el)-flag;
			if (n<0) n=-n;
			n++;
			movewidth=$el.outerWidth()*n;
			var dims1 = {
				'left': moveleft+ml,
				'top': $el.position().top+mt,
				'width': movewidth-bx,
				'height': $el.outerHeight()-by
			};
			var dims2 = {
				'left': $el.position().left+ml,
				'top': $el.position().top+mt,
				'width': $el.outerWidth()-bx,
				'height': $el.outerHeight()-by
			};
			
			$back.stop(true,false).animate(dims1, o.speed, o.fx).animate(dims2, o.speed, o.fx, function () {
				$(".lavaLamp li").removeClass("flag");
				$el.addClass("flag");
				if (cbType == 'return') {
					o.returnFinish($el);
				} else {
					o.hoverFinish($el);
				}
			});
		};