求助各位大佬，为啥我下拉列表计时器没有清空，移入移出后还会反复横跳？ - JavaScript论坛

楼主
问题点数：0 回复次数：0
求助各位大佬，为啥我下拉列表计时器没有清空，移入移出后还会反复横跳？
程序代码：
<!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>
搜索更多相关主题的帖子: function　href　javascript　var　obj　