求解：多物体动画没有效果-慕课网

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

来源：4-1 JS多物体动画

慕仰1571740

2016-03-30 21:51

<!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>

写回答关注

1回答

code16: 2016-03-30 23:02:45

已采纳

<!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）。

1 0

慕仰1571...

非常感谢！

2016-04-04 23:05:23

共 1 条回复 >

JS动画效果

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

113931 学习 · 1443 问题

查看课程

相似问题

怎么实现多物体链式动画

回答 2

在多个物体透明度动画里

回答 1

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

回答 1

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

回答 4

多物体的多运动

回答 2

打开慕课网App查看更多内容