不明白错在哪,打开页面不滑动

来源:2-1 JS速度动画

尘埃开出花

2016-07-23 16:48

<!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('divl');

        oDiv.onmouseover=function(){

        startMove(0);}

        oDiv.onmouseout=function(){

        startMove(-200);}

        }
        var timer=null;

        function  startMove(iTarget){
            clearInterval(timer);
            var   oDiv=document.getElementById('divl');
            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>  
  <body>
<div id="div1"><span id="share">分享</span></div>
  </body>
  </html>

写回答 关注

1回答

  • wajf
    2016-07-23 17:59:00
    已采纳

    div的获取错误,是div1而不是divl;

    尘埃开出花

    非常感谢!

    2016-08-03 10:12:21

    共 1 条回复 >

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113924 学习 · 1443 问题

查看课程

相似问题