jQuery导航特效 - 鼠标滑过/滑动遮罩背景图片跟随_js/jQuery

资料来源：网络整理时间：2023/3/4 0:56:30 共计：3586 浏览

这种遮罩效果的菜单滑动，背景图片可以动态滑动特效代码：

<!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="http://sc.chinaz.com/">系统定制</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>    
<div style="text-align:center;clear:both">    
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>    
</div>    
</body>    
</html>

目前有不少模板都使用了这种动态的滑动效果，虽然zblog模板用的不多，但在PC时代未结束之前，这种效果必然非常有市场！

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：CSS：父元素高度确定的单行文本垂直居中使用height+line-height_CSS学习 | ·下一条：jQuery高亮楼层导航插件One-Page-Nav - 横向、纵向高亮楼层导航特效_js/jQuery