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

来源：互联网发布：mac 接口压力测试工具编辑：程序博客网时间：2024/06/07 19:54

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

lavalamp下载原地址

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

太多JS没找到相应的js

于是只能自己修改lavalamp插件

首先引入js

更多效果还需要引入

页面：

<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.csdn.net/detail/ouyangbo100/7325359

http://download.csdn.net/detail/ouyangbo100/7325383

http://download.csdn.net/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);}});};

0 0