鼠标滑过遮罩跟随jQuery导航代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是鼠标滑过遮罩跟随jQuery导航代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标滑过遮罩跟随jQuery导航</title>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(e) {
		var navLi = $("#nav-div ul li"),
		    navUl = $("#nav-div ul"),
		    speed = 200;
			function OnClick(){
				 n =  navUl.find("li.on").index();
			     navUl.stop().animate({backgroundPosition:navLi.width()*n},speed);
				}
			 OnClick();	
		    navLi.hover(
		      function(){
			     n = $(this).index();
				 navUl.stop().animate({backgroundPosition:navLi.width()*n},speed);
			   },
			  function(){
				OnClick();
			   })
		       navLi.click(function(){
			     $(this).addClass("on").siblings().removeClass("on")
			   });
	$(window).scroll(function() {
	  if($(window).scrollTop() >  $("#nav").height()+50){
          $("#nav").addClass("scoll_nav")
	    }
	  else{
		 $("#nav").removeClass(	"scoll_nav")
			}
		 });	   			   	 		    
})
</script>
<style type="text/css">
body,html{ padding:0; margin:0;}
a{ text-decoration:none; color:#FFF; font-weight:bold; font-size:14px;}
div,ul,li{ padding:0; margin:0;}
#nav-div{ width:1020px; height:42px; background:#1BA2E1; margin:auto; position:relative;}
ul{ width:100%; height:42px;list-style:none; cursor:pointer; background: url(images/nav_on.png) no-repeat;}
#nav-div ul li{ width:100px; height:42px; line-height:42px; text-align:center; margin:auto; float:left; color:#FFF; cursor:pointer;}
#nav-div ul li:hover a{ color: #FF6;}
#liItemPaner{ width:100px; height:40px; background:#FC0; position:absolute;  }
.nav-side{ width:1020px; margin:auto;height:42px; background: #1BA2E1; }
.scoll_nav{width:100%;position:fixed; top:10px;  z-index:10000;}
#nav .nav-on { color:#F00;}
</style>
</head>
<body>
<br><br><br>
<div class="top"></div>
		<div id="nav" class="nav-side">
        <div id="nav-div">
             <ul>
                <li class="on"><a href="#" >首页</a></li>
		        <li><a href="#">下载中心</a></li>
		        <li><a href="#">产品中心</a></li>
                <li><a href="#">系统定制</a></li>
		        <li><a href="#">解决方案</a></li>
		        <li><a href="#">服务中心</a></li>
		       <li><a href="#" >合作伙伴</a></li>
		       <li><a href="#">关于我们</a></li>
           </ul>
       </div>
    </div>
<div style="height:15px;"></div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)