没有出来动画

来源:2-1 JS速度动画

qq_耿阳阳_0

2016-11-16 17:40

这是我写的代码:

<style>

*{

  margin:0;

  padding:0;

}

#did{

width:200px;

height:200px;

background:red;

top:0px;

}

</style>

<script type='text/JavaScript'>

window.onload=function(){

var oDiv=document.getElementById("did");

oDiv.onmouseover=function(){

startMove(400);

}

}

var timer=null;

function startMove(object){

clearInterval(timer);

timer=setInterval(function(){

var speed=0;

if(oDiv.offsetWidth>object){

speed=-10;

}

else{

speed=10;

}

if(oDiv.offsetWidth==object){

clearInterval(timer);

}

else{

oDiv.style.width=oDiv.offsetWidth+speed;

}

},30)

}

</script>


写回答 关注

2回答

  • Lemon156
    2016-11-17 10:00:54

    你代码中两个地方有错误

    1. 在startMove函数中没有获取到id为did的div

    2. 在给oDiv.style.width赋值的时候要加上px,因为oDiv.style.width是有带单位的

      下面是我改过来的代码


    3. <script type='text/JavaScript'>
      window.onload=function(){
      var oDiv=document.getElementById("did");
      oDiv.onmouseover=function(){
      startMove(400);
      }
      }
      var timer=null;
      function startMove(object){
      var oDiv=document.getElementById("did");
      clearInterval(timer);
      timer=setInterval(function(){
      var speed=0;
      if(oDiv.offsetWidth>object){
      speed=-10;
      }
      else{
      speed=10;
      }
      if(oDiv.offsetWidth==object){
      clearInterval(timer);
      }
      else{
      oDiv.style.width=oDiv.offsetWidth+speed+'px';
      }
      },30)
      }
      </script>
  • ghost-gentleman
    2016-11-16 19:15:04

    offsetwidth改成offsetleft

JS动画效果

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

113931 学习 · 1443 问题

查看课程

相似问题