精简版的 LavaLamp JQuery 滑动导航

发布于：电脑网络 5,216 次践踏

本来是在做 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 那样可以长短伸缩灵活，大家就各取所需吧。

  1. 想求助万戈~ 关于lavalamp的js文件盒一个插件的js冲突的问题：

    例子是这样的：（我在本地测试的）
    1，搭建新的wordpress

    2，安装了iNove主题

    3，安装了插件WP Facebox download
    可以参考这里的效果显示：
    http://www.aedes.us/f/iIqN0.png

    4，修改header.php，添加加载jQuery的代码，然后修改footer.php文件，在body结束标签之前添加加载lavalamp.js的代码（这个时候没把lavalamp.js放进js文件夹，插件的效果还是好的）
    这里是按照mg12的教程做得：http://www.neoease.com/lavalamp-for-wordpress-users/

    5，把lavalamp.js放进js文件夹，lavalamp效果出现，插件效果就出错了。。。
    显示如图：
    http://www.aedes.us/f/wsdLX.png

    希望万戈能给与指点，貌似是这个插件的JS和lavalamp的JS冲突，可是我对JS一窍不通，不知道如何着手去解决这个问题，拜托了，纠结了我3个通宵了。。。

  5. 我觉得虽然移动的时候有点生涩，但是代码方面做了精简，对于一般的博客和企业站来说，够用就成了。

    收下了，最近在学仿站，到时候添加上这个看看效果。

  24. 以前为了找到这样的效果，我费了许多力气。如果现在就好了，能够从你这里找。只是，你的站点效果已经很多了。我到是觉得可以省一些下来。有时候我感觉速度会有一点点慢。

  47. 不能等那个滑块滑过去再把文字变色么？在半秒钟的时间内，鼠标指向的文字会短暂失踪……好吧我是站着说话不腰疼，不懂JQuery的不知道玩JQuery的辛苦……