求解：多物體動畫沒有效果
<!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>
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）。