首页 > 代码库 > 将一个200*200的盒子以200ms/10px的速到增到到400px之后再以同样的方式缩放到原来的位置
将一个200*200的盒子以200ms/10px的速到增到到400px之后再以同样的方式缩放到原来的位置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>练习题</title> </head> <style type="text/css"> .box { height: 200px; width: 200px; background: red; } </style> <body> <!--让一个200px的盒子以每秒10px的速度增大到400,再返回到200px--> <div class="box">这是200*200的盒子</div> <script type="text/javascript"> var box = document.getElementsByClassName(‘box‘)[0]; var speed = 0; function move1() { speed += 10; box.style.width = 200 + speed + ‘px‘; box.style.height = 200 + speed + ‘px‘; if(speed >= 200) { clearInterval(t1); function move2() { speed -= 10; box.style.width = 200 + speed + ‘px‘; box.style.height = 200 + speed + ‘px‘; if(speed <= 0) { clearInterval(t2); } }; var t2 = setInterval(move2, 200); }; }; var t1 = setInterval(move1, 200); </script> </body> </html>
将一个200*200的盒子以200ms/10px的速到增到到400px之后再以同样的方式缩放到原来的位置
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。