问答详情
源自:4-1 JS多物体动画

没有报错,但是为什么没效果?

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

<title>计时器</title>

<style type="text/css">

body{margin: 0;padding: 0;}

#box{width: 100px;height: 100px;background-color:yellow;margin: 10px;}

</style>

<script type="text/javascript">

window.onload=function(){

var boxs=document.getElementsByTagName('box');

for (var i = 0; i < boxs.length; i++) {

boxs[i].timer=null;

boxs[i].onmouseover=function(){

goMove(this,300);

 }

   boxs[i].onmouseout=function(){

goMove(this,50);

    } 

  } 

}     

function goMove(obj,target){

clearInterval(obj.timer);

   obj.timer=setInterval(function(){

   var speed=(target-obj.offsetWidth)/10;

   speed=speed>0?Math.ceil(speed):Math.floor(speed);

if (obj.offsetWidth==target){

clearInterval(obj.timer);

}else{

obj.style.width=obj.offsetWidth+speed+'px';

}

},30);

}

</script>

</head>

<body>

<div id="box"></div>

<div id="box"></div>

<div id="box"></div>

</body>

</html


提问者:qq_yEs先生_53591812 2016-08-29 17:04

个回答

  • 记不起_
    2016-09-28 18:49:24

    var boxs=document.getElementsByTagName('box');这里错了哦!

  • qq_yEs先生_53591812
    2016-08-29 17:17:08

    明白了 犯了一个很愚的错误