为了账号安全,请及时绑定邮箱和手机立即绑定

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

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


正在回答

2 回答

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

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

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

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

举报

0/150
提交
取消
JS动画效果
  • 参与学习       113925    人
  • 解答问题       1443    个

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

进入课程

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信