                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

为什么往左只回了一下，然后就开始来回动，求大神帮忙解答

<!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>
</head>
<style>

   body,div,span{
       margin:0;
       padding:0;
   }
   #div1{
       width:200px;
       height:200px;
       background:red;
       position:relative;
       left:-200px;
       top:0;
   }
   #share{
       width:20px;
       height:50px;
       background:blue;
       position:absolute;
       left:200px;
       top:75px;
   }
</style>

<script>
   window.onload=function(){
       var oDiv=document.getElementById('div1');
       oDiv.onmouseover=function(){
           startMove();
       }
       oDiv.onmouseout=function(){
           startMove1();
       }
   }
   var timer=null;

   function startMove(){
       clearInterval(timer);//防止每次鼠标经过的时候都要出发定时器
       var oDiv=document.getElementById('div1');
       setInterval(function(){//定时器
           if(oDiv.offsetLeft>=0){
               clearInterval(timer);//清空/暂停定时器
           }else{
               oDiv.style.left=oDiv.offsetLeft+10+'px';
           }
       },30)
   }

   function startMove1(){
       clearInterval(timer);//防止每次鼠标经过的时候都要出发定时器
       var oDiv=document.getElementById('div1');
       setInterval(function(){//定时器
           if(oDiv.offsetLeft<=-200){
               clearInterval(timer);//清空/暂停定时器
           }else{
               oDiv.style.left=oDiv.offsetLeft-10+'px';
           }
       },30)
   }

</script>

<body>
   <div id="div1">
       <span id="share">分享</span>
   </div>
</body>
</html>

y年华游你

2016-03-02

源自：JS动画效果 2-1

关注问题我要回答

819

操作

收起

2 回答

奈奈我喜欢你呀回答被采纳 +3 积分
2016-03-02

你的代码应该修改为

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>速度动画</title>
</head>
<style>

    body,div,span{
        margin:0;
        padding:0;
    }
    #div1{
        width:200px;
        height:200px;
        background:red;
        position:relative;
        left:-200px;
        top:0;
    }
    #share{
        width:20px;
        height:50px;
        background:blue;
        position:absolute;
        left:200px;
        top:75px;
    }
</style>

<script>
    window.onload=function(){
        var oDiv=document.getElementById('div1');
        oDiv.onmouseover=function(){
            startMove();
        }
        oDiv.onmouseout=function(){
            startMove1();
        }
    }
    var timer=null;
    
    function startMove(){
        clearInterval(timer);//防止每次鼠标经过的时候都要出发定时器
        var oDiv=document.getElementById('div1');
         timer=setInterval(function(){//定时器//开启定时器
            if(oDiv.offsetLeft==0){
                clearInterval(timer);//清空/暂停定时器
            }else{
                oDiv.style.left=oDiv.offsetLeft+10+'px';
            }
        },30)
    }
    
    function startMove1(){
        clearInterval(timer);//防止每次鼠标经过的时候都要出发定时器
        var oDiv=document.getElementById('div1');
        timer=setInterval(function(){//定时器
            if(oDiv.offsetLeft==-200){
                clearInterval(timer);//清空/暂停定时器
            }else{
                oDiv.style.left=oDiv.offsetLeft-10+'px';
            }
        },30)
    }
    
</script>


<body>
    <div id="div1">
        <span id="share">分享</span>
    </div>
</body>
</html>