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

求解：多物体动画没有效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=donghua;
function donghua(){
var duix=document.getElementsByTagName("div");
for(var i=0;i<duix.length;i++){
duix[i].style.width=100+"px";
duix[i].style.border="1px solid red";
duix[i].style.height="100px"
duix[i].onmouseover=move(this);
}}
var timer=null;
function move(xx){
clearInterval(xx.timer);
xx.timer=setInterval(function(){
var cc= parseInt(xx.offsetWidth);
if(cc<200){
cc++;
}
xx.style.width=cc+"px";
},10)
}
</script>
</head>
<body>
<div>动画测试一</div>
<div>动画测试二</div>
<div>动画测试三</div>
</body>
</html>

慕仰1571740

2016-03-30

源自：JS动画效果 4-1

关注问题我要回答

528

操作

收起

1 回答

code16 回答被采纳 +3 积分
2016-03-30

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script>
  window.onload=function(){
    donghua();
  }
  function donghua(){
    var duix=document.getElementsByTagName("div");
    for(var i=0;i<duix.length;i++){
      duix[i].style.width=100+"px";
      duix[i].style.border="1px solid red";
      duix[i].style.height="100px"
      duix[i].onmouseover=function(){
        move(this);
      }
    }
  }
  var timer=null;
  function move(xx){
    clearInterval(xx.timer);
    xx.timer=setInterval(function(){
      var cc= parseInt(xx.offsetWidth);
      if(cc<200){
         cc++;
      }
      xx.style.width=cc+"px";
    },10)
  }
  </script>
</head>
<body>
<div>动画测试一</div>
<div>动画测试二</div>
<div>动画测试三</div>
</body>
</html>

更改后的代码，更改有两点：

  window.onload=function(){
    donghua();
  }

和

      duix[i].onmouseover=function(){
        move(this);
      }

之前的形式无法正确调用函数！

但是这样的代码跑了之后就会发现，width会一直增长下去，原因在视频里也提到了，是border的问题，你设置的是cc++，但是每次增长的是3px。改正的方法可以按照视频里提到的，也可以把width的设置放在cc判断的里面（效果是没有前面的方法好，而且依旧是每次增加3px）。

0 回复有任何疑惑可以回复我~

收起回答

慕仰1571740 提问者

非常感谢！

2016-04-04 回复有任何疑惑可以回复我~

0/150

提交

取消

JS动画效果

参与学习 113926 人
解答问题 1443 个

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

进入课程

本课相似问答

2 回答怎么实现多物体链式动画

1 回答在多个物体透明度动画里

1 回答鼠标移动图片透明度变化，没有变化（）---多物体动画

4 回答动画效果没有显示出来，求指错

2 回答多物体的多运动

搜索更多本课相关问答

求解：多物体动画没有效果

我要回答关注问题

热搜

最近搜索清空

求解：多物体动画没有效果

1 回答

本课相似问答

求解：多物体动画没有效果