求助各位大佬,为啥我下拉列表计时器没有清空,移入移出后还会反复横跳?
程序代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script> window.onload=function(){ var odv=document.getElementById('box'); var nav_big=getElement(odv,"nav_big")[0]; var nav_small=getElement(odv,"nav_small")[0]; var oli_big=nav_big.getElementsByTagName('li'); var oul_small=nav_small.getElementsByTagName('ul'); var oa_big=[]; for(var i=0;i<oli_big.length;i++) { oli_big[i].index=i; oli_big[i].onmouseover=function(){ this.style.background="#F99"; Move(oul_small[this.index],'top',0); } oli_big[i].onmouseout=function(){ this.style.background=""; Move(oul_small[this.index],'top',-150); } } for(var n=0;n<oul_small.length;n++) { var oli_small=oul_small[n].getElementsByTagName('li'); oul_small[n].style.top=-oul_small[n].offsetHeight+"px"; for(var j=0;j<oli_small.length;j++) { oli_small[j].onmouseover=function(){ this.style.background="#FF3"; } oli_small[j].onmouseout=function(){ this.style.background=""; } } } } function getStyle(obj,name){ if(obj.currentStyle) { return obj.currentStyle[name];} else {return getComputedStyle(obj,false)[name];} } function Move(obj,cssname,itraget){ var speed=""; obj.timer=null; clearInterval(obj.timer); obj.timer=setInterval(function(){ var curr=parseInt(getStyle(obj,cssname)); speed=parseFloat((itraget-curr)/6); speed=speed>0?Math.ceil(speed):Math.floor(speed); if(curr==itraget) {clearInterval(obj.timer);} else{ obj.style[cssname]=curr+speed+"px"; } },30); } function getElement(obj,classvlue){ var oall=obj.getElementsByTagName('*'); var arr=[]; for(var i=0;i<oall.length;i++) { if(oall[i].className==classvlue) { arr.push(oall[i]); } } return arr; } </script> <style> *{ padding:0px; margin:0px; } ul{list-style-type:none;} a{ text-decoration: none; } #box { position:absolute; background:#CCC; height:230px; width:700px; left:280px; } .nav_small { position: absolute; height: 150px; width: 700px; top: 80px; background-color: #FFF; } .nav_big{ list-style-type:none; height:80px; width:700px; background:#FCC; margin:0px auto; position:absolute; top:0px; left:0px; z-index: 2; } .nav_big li{ border: 1px solid black; border-radius: 20px; font-size: 25px; font-family: "华文行楷"; float: left; width: 120px; height: 20px; margin: 10px 0px 10px 10px; text-align: center; padding: 20px; } .small1{ position: absolute; width: 160px; height: 90px; text-align: center; left: 10px; background-color: #FFC; z-index: 1; } .small1 li{ margin-bottom: 10px; } .small2{ position:absolute; width:160px; height:150px; background:#FFC; text-align:center; left:180px; z-index: 1; } .small2 li{margin-bottom:10px;} .small3{ position:absolute; width:160px; height:60px; background:#FFC; text-align:center; left:350px; z-index: 1; } .small3 li{margin-bottom:10px;} .small4{ position:absolute; width:160px; height:150px; background:#FFC; text-align:center; left:520px; z-index: 1; } .small4 li{margin-bottom:10px;} </style> </head> <body> <div id="box"> <ul class="nav_big"> <li><a href="javascript=:;">游戏</a></li> <li><a href="javascript=:;">漫画</a></li> <li><a href="javascript=:;">动画</a></li> <li><a href="javascript=:;">轻小说</a></li> </ul> <div class="nav_small"> <ul class="small1"> <li><a href="javascript=:;">FGO</a></li> <li><a href="javascript=:;" >FPS</a></li> <li><a href="javascript=:;">RBG</a></li> </ul> <ul class="small2"> <li><a href="javascript=:;">妖尾</a></li> <li><a href="javascript=:;">海贼</a></li> <li><a href="javascript=:;">死神</a></li> <li><a href="javascript=:;">火影</a></li> </ul> <ul class="small3"> <li><a href="javascript=:;">luck star</a></li> <li><a href="javascript=:;">angle best</a></li> </ul> <ul class="small4"> <li><a href="javascript=:;">冰菓</a></li> <li><a href="javascript=:;">凉宫</a></li> <li><a href="javascript=:;">春物</a></li> <li><a href="javascript=:;">烟草</a></li> </ul> </div> </div> </body> </html>