跟随鼠标滑动的hover效果jQuery导航插件

本导航插件是基于jQuery的仿Flash滑动效果的导航栏：LavaLamp插件。鼠标移动都导航栏上，效果会从最开始迅速滑动过来，导航越长，滑动的越快。还会弹性的来回反弹。鼠标移动的位置和初始位置距离越远，滑动的速度和反弹的激烈程度越强。展示效果可能不好看，可以在lavalamp_test.css文件修改样式。 1、在head引入相关的js文件和css文件，如下：

<link rel="stylesheet" href="style/lavalamp_test.css" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery-1.1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.js"></script>
<script type="text/javascript">
    $(function() {
        $("#nav1, #nav2, #nav3").lavaLamp({
            fx: "backout",
            speed: 700,  //滑动速度
            click: function(event, menuItem) {
                return false;
            }
        });
    });
</script>

2、在需要使用该效果的地方加入下面的三种导航条效果的任意一种代码：
第一种导航条效果

<ul class="lavaLampWithImage" id="nav1">
    <li><a href="#">我爱模板</a></li>
    <li><a href="#">Plant a tree</a></li>
    <li><a href="#">Travel</a></li>
    <li><a href="#">elephant</a></li>
</ul>

第二种导航条效果

<ul class="lavaLampNoImage" id="nav2">
    <li><a href="#">Home</a></li>
    <li><a href="#">Plant a tree</a></li>
    <li><a href="#">Travel</a></li>
    <li><a href="#">elephant</a></li>
</ul>

第三种导航条效果

<ul class="lavaLampBottomStyle" id="nav3">
    <li><a href="#">Home</a></li>
    <li><a href="#">Plant a tree</a></li>
    <li><a href="#">网站模板</a></li>
    <li><a href="#">elephant</a></li>
</ul>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！