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

<!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,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript