哪里错了？如果用我自己写的style的话移出鼠标导航就会不停的变宽，换回课程上的style就不会出错？？？

<!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; }

*********************/

/******我的代码*******/
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
    padding: 0;
	margin: 0;
	font-size: 14px;	
}
a {color: #706f6f;text-decoration: none;}
ul{list-style: none;height: 30px; border-bottom: 10px solid #ff6600;padding-left: 30px;margin-top: 20px;}
ul li{float: left;}
ul li a {display: block;height: 30px;line-height: 30px;width: 80px;background: #9BFFFF; text-align: center; margin-right: 1px;padding:0 5px 0;}
a.on,ul a:hover {background: #ff6600; color: #FFF;}

/****/
</style>
<script>

window.onload=function(){
    var oNav=document.getElementsByTagName('ul')[0];
	var aA=oNav.getElementsByTagName('a');

	for(var i=0; i<aA.length; i++){

		aA[i].onmouseover=function(){
			if(this.className != "on"){
				clearInterval(this.time);
				var that=this;
				that.time=setInterval(function(){
					that.style.width=that.offsetWidth+8+"px";
					if(that.offsetWidth >= 120){
						clearInterval(that.time);
					}
				},30)
			}
		};
		aA[i].onmouseout=function(){
			if(this.className != "on"){
				clearInterval(this.time);
				var that=this;
				this.time=setInterval(function(){
					that.style.width=that.offsetWidth-8+"px";
					if(that.offsetWidth <= 80){
						that.style.width='80px';
						clearInterval(that.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>

MichaelYan0

2015-10-19

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

关注问题我要回答

736

操作

收起

3 回答

echo_kinchao
2015-10-20

因为你的JS一直给他的宽赋值啊

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

收起回答

MichaelYan0 提问者
2015-10-20

ul li a {display: block;height: 30px;line-height: 30px;width: 80px;background: #9BFFFF; text-align: center; margin-right: 1px; /*padding:0 5px 0; **去掉padding就没问题了**/}

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

收起回答

紫焰123
2015-10-19

在onmouseover中

if(that.offsetWidth >= 120){
   clearInterval(that.time);
}

这里执行完之后offsetwidth 肯定等于120

this.time=setInterval(function(){
                    that.style.width=that.offsetWidth-8+"px";
                    if(that.offsetWidth <= 80){
                        that.style.width='80px';
                        clearInterval(that.time);  
                    }  
                },30)

仔细看下这段代码的逻辑。

that.style.width=that.offsetWidth-8+"px";

你改变的是当前元素的宽度，并没有改变offsetWidth，并且该值一直等于120 ，所以if中的条件永远不会触发。clearInterval()永远不会实现

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

收起回答