求高手js 修改代码

第一 当触发onmouseOver事件的时候 图片完全下滑后 然后触发离开事件 图片就上收
第二 当事件触发的时候图片下滑到值为144的时候 才可重新触发事件
下面是代码 还没修改的：<ul> 
<li><a onmouseOver="mouseOver(1)" onmouseOut="mouseOut(1)" >a</a><img src="1.png" style="position:absolute; top:-149;" id="div1" ></li> 
<li><a onmouseOver="mouseOver(2)" onmouseOut="mouseOut(2)" >b</a><img src="1.png" style="position:absolute; top:-149;" id="div2" ></li> 
</ul>    
 
<script type="text/javascript"> function mouseOver(u){ 
var o=document.getElementById('div'+u);
var a=0;
function move(){a++;
if(a==49){clearInterval(time);} 
o.style.top = (o.style.top.replace('px','')-0 +3);} 
var time = window.setInterval(move,10);}  
 function mouseOut(u){
var o=document.getElementById('div'+u);
var b=0;
function mov(){b++;
if(b==49){clearInterval(time);} 
o.style.top = (o.style.top.replace('px','') -3 );} 
var time = window.setInterval(mov,10);}  </script>   <style type-"text/css"> 
ul {width: 700px; margin: 0 auto; text-align: center;} 
ul li {  float:right;list-style: none;}     
ul li a {             
display: block;                                        
width: 97px;                                                   
height: 77px;                                        
padding: 72px 0 0 0;                                  
margin: 0 32px 0 32px;                     
font: bold 16px Helvetica; 
} 
</style>  这个是自己修改后的代码 但是觉得不够好 所以请高手帮忙完善他<li><img style="position:absolute;top:0px;" src="1.png" id="div1" /><a id="A" style="position:absolute;" onmouseOver="mouseOver(1)" onmouseOut="mouseOut(1)" >A</a></li>
<li><img style="position:absolute;top:0px;" src="1.png" id="div2" /><a id="B" style="position:absolute;" onmouseOver="mouseOver(2)" onmouseOut="mouseOut(2)" >B</a></li> 
</ul><script type="text/javascript">
function mouseOver(u){
var a=0;
var o=document.getElementById('div'+u);
var aop = document.getElementById('div'+u).offsetTop;
if(aop<10){
function move(){a++; 
var top = document.getElementById('div'+u).offsetTop;
if(top>140)  {clearInterval(time);}
if(a==29)    {clearInterval(time);}
o.style.top = (o.style.top.replace('px','')-0 +7);}
var time = window.setInterval(move,1);}}function mouseOut(u){
var gop = document.getElementById('div'+u).offsetTop;
if(gop>130||gop <130 ){
setTimeout(function(){
var ab=0;
var o=document.getElementById('div'+u);
function mov(){ ab++;
var top = document.getElementById('div'+u).offsetTop;
if(top<10) {clearInterval(time);}
if(ab==29) {clearInterval(time);}
o.style.top = (o.style.top.replace('px','') - 7);}
var time = window.setInterval(mov,1);},500);}}
</script><style type-"text/css">
li {list-style: none;
    font: bold 16px Helvetica;
    text-transform: uppercase;
}
#div2{margin:0px 200px;}
#B{position:absolute;top:15px; margin:0px 100px;}
</style>  
 

解决方案 »

  1.   

    <ul> 
    <li><img style="position:absolute;top:0px;" src="1.png" id="div1" /><a id="A" style="position:absolute;" onmouseOver="mouseOver(1)" onmouseOut="mouseOut(1)" >A</a></li>
    <li><img style="position:absolute;top:0px;" src="1.png" id="div2" /><a id="B" style="position:absolute;" onmouseOver="mouseOver(2)" onmouseOut="mouseOut(2)" >B</a></li> 
    </ul> 
     
    <script type="text/javascript">
    var state={}
    function mouseOver(u){
    if(state[u])return false;//如果移动正在进行则退出
    var a=0;
    var o=document.getElementById('div'+u);
    var aop = document.getElementById('div'+u).offsetTop;
    if(aop<10){
    state[u]=true;//////标记为正在运行
    function move(){
    a++; 
    var top = document.getElementById('div'+u).offsetTop;
    if(top>140)  {clearInterval(time);state[u]=false;/*=====标记为未运行========*/}
    //if(a==29)    {clearInterval(time);}///这句不用了，根本执行不到，上面的语句已经清除了计时器，a就不会继续增长了
    //o.style.top = (o.style.top.replace('px','')-0 +7);
    o.style.top = parseInt(o.style.top) +7+'px';//加上单位px，要不默认为pt，replace替换px肯定不执行了，直接parseInt就好，不用replace
    }
    var time = window.setInterval(move,1);
    }
    }
     
     
     
    function mouseOut(u){
    if(state[u])return false;//如果移动正在进行则退出
    var gop = document.getElementById('div'+u).offsetTop;
    if(gop>130||gop <130 ){
    state[u]=true;//////标记为正在运行
    //setTimeout(function(){/////////不用延时收缩了吧，我帮你注销了
    var ab=0;
    var o=document.getElementById('div'+u);
    function mov(){ ab++;
    var top = document.getElementById('div'+u).offsetTop;
    if(top<10) {clearInterval(time);state[u]=false;/*=====标记为未运行========*/}
    //if(ab==29) {clearInterval(time);}
    //o.style.top = (o.style.top.replace('px','') - 7);
    o.style.top = parseInt(o.style.top) -7+'px';//加上单位px
    }
    var time = window.setInterval(mov,1);//},500);
    }
    }
    </script>
     
     
     
    <style type-"text/css">
    li {list-style: none;
        font: bold 16px Helvetica;
        text-transform: uppercase;
    }
    #div2{margin:0px 200px;}
    #B{position:absolute;top:15px; margin:0px 100px;}
    </style>