精简版的 LavaLamp JQuery 滑动导航

发布于：电脑网络 3,394 次践踏

本来是在做 WordPress 主题的，做着做着就想给主题的导航加一个 JQuery 的滑动效果，很久没有折腾 JQuery 了，今天有点手痒痒，于是就深入折腾了一下。用 JQuery 实现的动感导航效果有很多，我之前就介绍过一个，也就是我这个主题正在使用的导航效果，本来想用著名的 LavaLamp 的滑动导航，但是因为 LavaLamp 的代码过于冗长，除了一个 JQuery 库，还需要另外两个脚本再加一段 JQuery 的执行文件，对于小站来说太奢侈了一些。

于是今天又折腾了一个精简版的 LavaLamp 滑动导航效果，为什么说是精简版呢？因为这个滑动效果同样也是用 JQuery 库，不过这个精简版的 LavaLamp 仅需要几行执行脚本，再加上一些样式就可以实现了，同样可以完美支持 IE、Firefox、Chrome 等主流浏览器，其效果和完整版的 LavaLamp 可以媲美。

先看一下这两个 LavaLamp 的对比效果吧：

完整版的 LavaLamp 效果 DEMO：http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

精简版的 LavaLamp 效果 DEMO：http://wange.im/demo/lavalamp/

精简版 LavaLamp 实现方法：

一、HTML 部分

<ul class="navipages" id="lavalamp">
    <li class="current"><a href="#">分类一</a></li>
    <li><a href="#">分类二</a></li>
    <li><a href="#">分类三</a></li>
    <li><a href="#">分类四</a></li>
</ul>

二、引入 JQuery

这里和完整版的 LavaLamp 有些不同，完整版的 LavaLamp 仅简 JQuery 1.2X 就可以了，而我这里的精简版 LavaLamp 必须 JQuery 1.3X 才行。这里我就以 Google 的 JQuery 库为例了：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=1.3.2"></script>

三、执行脚本部分

$(function(){
    var $el, leftPos, newWidth,
    $mainNav = $("#lavalamp");
    $mainNav.append("<li id='lavalampbg'></li>");
    var $magicLine = $("#lavalampbg");
    $magicLine
        .css("left", $(".current a").position().left)
        .data("origLeft", $(".current a").position().left)               
    $("#lavalamp li").find("a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        $magicLine.stop().animate({
          left: leftPos
        })
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft")
        });   
    });
});

四、样式部分

.navipages:after {visibility:hidden;display:block;}
*:first-child+html .navipages {zoom:1;} /* IE7 */
#lavalamp li {display:inline;}
#lavalamp li a {width:90px;display:block;float:left;text-align:center;position:relative;z-index:200;}
#lavalamp li a:hover {color:white;}
#lavalamp #lavalampbg {width:90px;height:25px;position:absolute;top:10px;left:0;background:#D90018;z-index:100;}

这样就 OK 了，比完整版的 LavaLamp 可要简单很多吧，不过相比完整版的 LavaLamp 而言还有一点不足，对于每个 li 元素的宽度是固定的，没有完整版的 LavaLamp 那样可以长短伸缩灵活，大家就各取所需吧。