为什么鼠标做一次移入移除后，会突突突突卡在那

<!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>
#div1{
   width:200px;
   height:200px;
   background:blue;
   position:absolute;
   left:-200px;
}
#div1 span{
   width:20px;
   height:50px;
   background:red;
   position:absolute;
   top:80px;
   left:200px;
   display:block;
}
</style>
<script>
window.onload=function(){
       var timer=null;
       var oDiv=document.getElementById("div1")
       oDiv.onmouseover=function(){
           movepic();
       }
       oDiv.onmouseout=function(){
           movepic2();
           }
   }


function movepic(){
   var timer=null;
   var oDiv=document.getElementById("div1")
   clearInterval(timer)
   timer=setInterval(function(){
       if(oDiv.offsetLeft==0)
       {
           clearInterval(timer)
       }
       else
       {
           oDiv.style.left=oDiv.offsetLeft+10+'px';
       }
   },30)
}
function movepic2(){
   var timer=null;
   var oDiv=document.getElementById("div1")
   clearInterval(timer)
   timer=setInterval(function(){
       if(oDiv.offsetLeft==-200)
       {
           clearInterval(timer)
       }
       else
       {
           oDiv.style.left=oDiv.offsetLeft-10+'px';
       }
   },30)
}

</script>
</head>

<body>
<div id='div1'>
   <span>分享</span>
</div>

</body>
</html>

柠檬小茶

浏览 1431回答 2

2回答

穆荇

事件冒泡了。movepic() 和 movepic2() 函数中删除 var timer = null;把var timer = null; 定义到函数外面，这两个函数上。就可以了。------具体修改var timer = null;function movepic() { //var timer = null; //注释或删除 .....｝function movepic2() { //var timer = null; //注释或删除 ......｝

随时随地看视频慕课网APP