问答详情
源自:2-1 JS速度动画

怎么没有效果,就赐教,谢谢

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            body,div,span{
                margin: 0;
                padding: 0;
            }
            #div1{
                width: 200px;
                height: 200px;
                background: red;
                position: relative;
                left: -200px;
                top: 0;
            }
            
            #div1 span{
                width: 20px;
                height: 50px;
                background: blue;
                position: absolute;
                left: 200px;
                top: 75px;
                
            }
         </style>
         
         
        <script type="text/javascript">
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            oDiv.onmouseover=function{
                startMove(0);
            }
            oDiv.onmouseout=function(){
                startMove( -200);
            }
        }
            var timer=null;
            function startMove(iTarget){
                clearInterval(timer);
                var oDiv=document.getElementById('div1');
                timer=setInterval(function(){
                    var speed=0;
                    if(oDiv.offsetLeft>iTarget){
                        speed=-10
                    }
                    else{
                        speed=10
                    }
                    if(oDiv.offsetLeft==iTarget){
                    clearInterval(timer);
                }
                    else {
                        oDiv.style.left=oDiv.offsetLeft+speed+'px';}
                },30)
            }  
        </script>
        
    </head>
    <body>
    <div id="div1"><span id="share">分享</span></div>
    </body>
</html>

提问者:2016IT精英 2017-03-20 19:42

个回答

  • 强转程序猿
    2017-03-20 21:14:55
    已采纳

    老铁,你onmouseover后面的function少两个括号