jQuery背景跟随鼠标移动的网页导航

    背景跟随鼠标移动的网页导航jQuery代码，导航的背景会跟着鼠标移动，并会动态的左右晃动，渐渐停止。 1、JS代码：

<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.plugins.js"></script>
<script type="text/javascript">
$(function() {
	$(".meun").lavaLamp({
		fx: "backout", 
		speed: 700,
		click: function(event, menuItem) {
			return true;
		}
	});
});
</script>
<!--[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]-->

2、CSS代码：

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
/* meun */
.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;}
</style>

3、HTML代码：

<div class="meun">
	<div class="meun_bg"></div>
	<ul>
		<li><a href="http://www.5imoban.net/"><span>首页</span></a></li>
		<li><a href="http://www.5imoban.net/"><span>jquery 特效</span></a></li>
		<li><a href="http://www.5imoban.net/"><span>javascript特效</span></a></li>
		<li class="current"><a href="http://www.5imoban.net/"><span>网页模板</span></a></li>
		<li><a href="http://www.5imoban.net/"><span>div+css教程</span></a></li>
		<li><a href="http://www.5imoban.net/"><span>html5教程</span></a></li>
	</ul>
</div>

注：<li class="current">表示当前背景在哪里。例如，如果在首页，请在首页的li添加样式current。


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