我想知道无限延长的原理

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)
		}
	}
}

像我上面把onmouseout中的clearInterval(this.time);注释掉，其余不变，为什么当我的鼠标划过一个标签并迅速离开，该标签就会无限延长。当标签延长到160px不是会触发onmouseover下的清除计时器吗？

倔强的小瓶盖

2016-05-23

源自：导航条菜单的制作 5-2

关注问题我要回答

562

操作

收起

4 回答

忽如远行客_
2016-08-04

额好像会错你的意思了抱歉

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

忽如远行客_
2016-08-04

<!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>导航菜单</title>

<style type="text/css">

* { margin: 0; padding: 0; font-size: 14px; }

a { color: #333; text-decoration: none }

ul { list-style: none; height: 30px; border-bottom: 5px solid #F60; margin-top: 20px; padding-left: 50px; }

ul li { float: left }

ul li a { display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px; }

a.on, a:hover { background: #F60; color: #fff; }

</style>

<script>

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>

<ul>

<li><a class="on" href="#">首　　页</a></li>

<li><a href="#">新闻快讯</a></li>

<li><a href="#">产品展示</a></li>

<li><a href="#">售后服务</a></li>

<li><a href="#">联系我们</a></li>

</ul>

</body>

</html>

试试这个在大于160会停

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

singerow
2016-06-21

This.time=setInterval(function(){

This.style.width=This.offsetWidth+8+"px";

if(This.offsetWidth>=160)

clearInterval(This.time);

},30)

if 条件下没有大括号。改成：

if(This.offsetWidth>=160){

clearInterval(This.time);

}

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

#1

加了大括号没起作用

2016-07-11 回复有任何疑惑可以回复我~

舒硕
2016-05-23

你那个清除判断不知道为什么不起作用，它自动延长的原理其实就是setInterval这个定时器每隔30毫秒执行一次a标签宽度就会加8px

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

#1

倔强的小瓶盖提问者

我也知道它延长的原理啊，可他延长到160不应该停止吗，搞不清导致他一直延长的步骤T T.

2016-05-23 回复有任何疑惑可以回复我~

#2

胖子文回复倔强的小瓶盖提问者

我是这么想的，你鼠标移入，触发onmouseover事件，如果你鼠标不动，确实可以停止，可是，如果你鼠标移来移去，就会失效。"JS动画效果"那个课题有讲过这个事，但也不是很详细,你可以去了解

2016-06-04 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

导航条菜单的制作

参与学习 123833 人
解答问题 838 个

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

我想知道无限延长的原理

我要回答关注问题

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号