<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>练习</title><style type="text/css" media="screen"> *{padding:0;margin:0;} ul{list-style: none;margin-left: 20px;} li{float: left;} a{text-decoration:none;height:40px;width:100px;background-color: #ccc;display:block;text-align: center;line-height: 40px;margin-bottom: 15px;} a:hover{background-color: #ecc;color: #fff; }</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; This.time=setInterval(function(){ This.style.width=This.offsetWidth+8+"px"; if(This.offetWidth>=130){ clearInterval(This.time); } },30); } aA[i].onmouseout=function(){ var This=this; This.time=setInterval(function(){ This.style.width=This.offsetWidth-8+"px"; if(This.offetWidth<=100){ This.style.width="100px"; clearInterval(This.time); } },30); } }} </script><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"></head><body> <ul> <li><a href="" title="">首页</a></li> <li><a href="" title="">资讯</a></li> <li><a href="" title="">新闻</a></li> <li><a href="" title="">产品展示</a></li> </ul> </body></html>
1 回答
stone310
TA贡献361条经验 获得超191个赞
1。if(XXX)里面的offsetWidth拼错了
2。每个事件的开始 ,即var This=this 后面要加上clearInterval(This.time);先停止上一次的计时器,否则来回移动会出现bug
添加回答
举报
0/150
提交
取消