jQuery跟随鼠标导航菜单特效插件

使用方法：

引入CSS样式

.meun{position:relative;height:68px;width:967px;padding-left:13px;background:url(images/meun_bg.png) no-repeat 0 8px;overflow: hidden;margin:40px auto;}
.meun_bg{ position:absolute;top:0px;left:0px;background:url(images/image87.png) no-repeat;height:8px;width:980px;overflow:hidden;}
.meun li{float:left;}
.meun li.back{background:url(images/meun_tab.png) no-repeat;padding-left:8px;height:68px;overflow:hidden;z-index:8;position:absolute;}
.meun li.back .left{background:url(images/meun_tab.png) no-repeat right 0;height:68px;float:right;width:8px;}
.meun li.back .arrow{float:left;width:92%;height:68px;position:relative;}
.meun li.back .arrow .icon{position:absolute;top:56px;left:45%;background:url(images/arrow.gif) no-repeat;height:5px;width:9px;overflow:hidden;}
.meun li a{ font-family:"微软雅黑","黑体";text-decoration:none;color:#fff;font-size:18px;z-index:10;display:block;float:left;position:relative;overflow:hidden;padding:25px 33px 0;height:43px;}
.meun li a span{cursor:pointer;}

引入jQuery库文件、插件JS文件

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.plugins.js"></script>

插件初始化、参数配置

$(function() {
	$(".meun").lavaLamp({
		fx: "backout", 
		speed: 700,
		click: function(event, menuItem) {
			return true;
		}
	});
});

HTML结构

<div class="meun">
  <div class="meun_bg"></div>
  <ul>
      <li><a href="#"><span>首页</span></a></li>
      <li><a href="#"><span>jquery 特效</span></a></li>
      <li><a href="#"><span>javascript特效</span></a></li>
      <li class="current"><a href="#"><span>flash特效</span></a></li>
      <li><a href="#"><span>div+css教程</span></a></li>
      <li><a href="#"><span>html5教程</span></a></li>
  </ul>
</div>

加入兼容IE7的样式

<!--[if lt IE 7]>
<style type="text/css">
.meun_bg{background:none!important; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/image87.png',sizingMethod='crop')}
</style>
<![endif]-->