js导航条二级滑动模仿块级作用域

for(var i = 1;i<7;i++){
　　　　//因为首级标题有6个，对每个首级标题添加mouseover和mouseout事件。
　　　　//这里用到块级作用域
	(function(k){
		document.getElementById("p_"+k).addEventListener('mouseover',function(event){
			document.getElementById('p_1').className = 'm_li';
			document.getElementById('cp_1').className = 'aa';
			this.className = 'm_li_f';
			document.getElementById("cp_"+k).style.display="block";
		},false);
		document.getElementById("p_"+k).addEventListener('mouseout',function(event){
			this.className = 'm_li';
			document.getElementById("cp_"+k).style.display="none";
		},false);
	})(i);
}
//如果没有用到块级作用域，改为

　　　　for(var i = 1;i<7;i++){
	　　　　document.getElementById("p_"+i).addEventListener('mouseover',function(event){

//此时i永远是指7，这里的i永远指for语句里面i最后取值。

document.getElementById('p_1').className = 'm_li'; document.getElementById('cp_1').className = 'aa'; this.className = 'm_li_f'; document.getElementById("cp_"+i).style.display="block";

},false); document.getElementById("p_"+i).addEventListener('mouseout',function(event){ this.className = 'm_li'; document.getElementById("cp_"+i).style.display="none"; //

此时i永远是指7，这里的i永远指for语句里面i最后取值。

},false)； 　　　　}

　下载地址：https://files.cnblogs.com/qduanlu/js%E5%AF%BC%E8%88%AA%E6%A0%8F.rar

<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'/>
	<link rel="stylesheet" type='text/css' href='css/1.css'/>
</head>
<body>
	<div id="menu">
		<ul id='menu_ul'>
			<li class="m_line"><img src="images/line1.gif" /></li>
			<li class="m_li_f" id="p_1"><a href="javaScript:void(0)">首页</a></li>
			<li class="m_line"><img src="images/line1.gif" /></li>
			<li class="m_li" id="p_2"><a href="javaScript:void(0)">jquery 特效</a></li>
			<li class="m_line"><img src="images/line1.gif" /></li>
			<li class="m_li" id="p_3"><a href="javaScript:void(0)">javascript特效</a></li>
			<li class="m_line"><img src="images/line1.gif" /></li>
			<li class="m_li" id="p_4"><a href="javaScript:void(0)">flash特效</a></li>
			<li class="m_line"><img src="images/line1.gif" /></li>
			<li class="m_li" id="p_5"><a href="javaScript:void(0)">div+css教程</a></li>
			<li class="m_line"><img src="images/line1.gif" /></li>
			<li class="m_li" id="p_6"><a href="javaScript:void(0)">html5教程</a></li>
			<li class="m_line"><img src="images/line1.gif" /></li>
		</ul>
	</div>
	<div id="subbox">
		<ul id="smenu">
			<li style="padding-left:29px;"  id="cp_1">jsfoot 教程</li>
			<li style="padding-left:143px" class="aa" id="cp_2">
				<a href="javaScript:void(0)" title="jquery图片特效" >jquery图片特效</a>
				  |  
				<a href="javaScript:void(0)" title="jquery导航菜单">jquery导航菜单</a>
				  |  
				<a href="javaScript:void(0)" title="jquery选项卡特效">jquery选项卡</a>
			</li>
			<li style="padding-left:257px;" class="aa" id="cp_3">
				<a href="javaScript:void(0)" title="jquery图片特效">jquery图片特效</a>
				  |  
				<a href="javaScript:void(0)" title="jquery导航菜单">jquery导航菜单</a>
				  |  
				<a href="javaScript:void(0)" title="jquery选项卡特效">jquery选项卡</a>
			</li>
			<li style="padding-left:371px;" class="aa" id="cp_4">
				<a href="javaScript:void(0)" title="jquery图片特效">jquery图片特效</a>
				  |  
				<a href="javaScript:void(0)" title="jquery导航菜单">jquery导航菜单</a>
				  |  
				<a href="javaScript:void(0)" title="jquery选项卡特效">jquery选项卡</a>
			</li>
			<li style="padding-left:485px;" class="aa" id="cp_5">
				<a href="javaScript:void(0)" title="jquery图片特效">jquery图片特效</a>
				  |  
				<a href="javaScript:void(0)" title="jquery导航菜单">jquery导航菜单</a>
				  |  
				<a href="javaScript:void(0)" title="jquery选项卡特效">jquery选项卡</a>
			</li>
			<li style="padding-left:371px;" class="aa" id="cp_6">
				<a href="javaScript:void(0)" title="jquery图片特效">jquery图片特效</a>
				  |  
				<a href="javaScript:void(0)" title="jquery导航菜单">jquery导航菜单</a>
				  |  
				<a href="javaScript:void(0)" title="jquery选项卡特效">jquery选项卡</a>
			</li>
		</ul>
	</div>
	<script type="text/javascript" src="js/1.js"></script>
<body>
</html>

*{
	margin : 0;
	padding : 0;
	list-style-type: none;
	text-decoration: none;
}
body{font-family:Tahoma, Verdana, Arial, sans-serif;
	font-size:12px;
	color:#333333;
}
a,img{
	border:0;
}
a:hover{
	color : #FF0000;
	text-decoration: none;
}
#menu{
	height : 32px;
	margin-top : 8px;
	background-color: #990000;
}
#menu ul{
	width : 778px;
	height : 32px;
	margin : 0 auto;
}
#menu ul>li{
	float : left;
}
.m_line{
	width:1px;
	height : 32px;
	line-height:32px;
}
.m_li_f{
	width:114px;
	height:32px;
	line-height:32px;
	text-align:center;
	padding-top:4px;
	font-weight:bold;
	background:url(../images/menu_bg.jpg);
	position:relative;
	margin:-4px -2px 0 -2px;
}
.m_li_f a{
	display:block;
	color:#FF0000;
	width:114px;
}
 .m_li{
	width:114px;
	height:32px;
	line-height:32px;
	text-align:center;
	margin:0px -2px;
}
.m_li a{
	color:#FFFFFF;
	width:114px;
	display: block;
}
#subbox{
	height:32px;
	background-color:#F1F1F1;
}
#subbox #smenu{
	width:810px;
	margin:0px auto;
	height:32px;
}
#smenu li{
	line-height:32px;height:32px;
}
.aa{
	display: none;
}
.bb{
	display: block;
}

posted @ 2012-12-20 16:03 前端露阅读(383) 评论(2) 收藏举报

刷新页面返回顶部

js导航条 二级滑动 模仿块级作用域

js导航条二级滑动模仿块级作用域