为了账号安全,请及时绑定邮箱和手机立即绑定

盯了一晚上没看出问题出在哪,使导航条收缩的动画无法触发

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>动画导航条</title>
	<style type="text/css">
	*{
		padding: 0px;margin: 0px; font:15px normal "微软雅黑";
	}
	ul{
		list-style-type: none;
		border-bottom: 5px solid #FFA54F;
		height:40px;
		padding-left: 50px;
	}
	li a{
		display: block;	
		float:left;	
		text-decoration: none;
		color: #000;
		padding: 5px 15px;
		background-color: #dbdbdb;
		text-align: center;
		margin:10px 0px 0px 1px;
		width:120px;
	}
	.cat-1 a,a:hover{
		background-color: #FFA54F;
	}
	</style>
	<script type="text/javascript">
	window.onload=function()
	{
		var aA=document.getElementsByTagName('a');
		for(var i=0;i<aA.length;i++)
		{
			aA[i].onmouseover=function()
			{		
			var This=this;
			clearInterval(This.time);
			This.time=setInterval(function()
				{
					This.style.width=This.offsetWidth+8+"px";
					if(This.offsetWidth>=160)
						{
							clearInterval(This.time);
						}
						
				},30)
			}
			aA[i].onmouseout=function()
			{		
			clearInterval(this.time);
			var This=this;
			this.time=setInterval(function()
				{
					This.style.width=This.offsetWidth-8+"px";
					if(This.offsetWidth<=120)
					{
						This.style.width='120px';clearInterval(This.time);
					}
				},30)
			}
		}
	}
	</script>
</head>
<body>
<div>
	<ul>
		<li class="cat-1"><a href="#">首页</a></li>
		<li class="cat-2"><a href="#">新闻快讯</a></li>
		<li class="cat-3"><a href="#">产品展示</a></li>
		<li class="cat-4"><a href="#">售后服务</a></li>
		<li class="cat-5"><a href="#">联系我们</a></li>
	</ul>
</div>
	
</body>
</html>


正在回答

1 回答

js放到chrome调试就知道了

0 回复 有任何疑惑可以回复我~
#1

myrtis 提问者

问题似乎不是出在JS上,因为我把成功案例的JS部分置换进来仍然无效,所以很迷茫
2015-09-15 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
导航条菜单的制作
  • 参与学习       123899    人
  • 解答问题       813    个

水平、垂直、圆角导航条菜单,让您的技术探索之路更高效

进入课程

盯了一晚上没看出问题出在哪,使导航条收缩的动画无法触发

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信