JavaScript之動畫縮放
阿新 • • 發佈：2017-10-28
art else this ctype gree css ger ava name
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .div{ width: 200px; height: 200px; background-color: lightgreen; } </style> </head> <body> <div class="div"></div> <script type="text/javascript"> window.onload=function(){ var div=document.getElementsByClassName(‘div‘)[0]; var timer=null; function larger(obj,goal,speed){ var offsetwidth=obj.offsetWidth; var offsetheight=obj.offsetHeight; if(offsetwidth<goal&&offsetheight<goal){ obj.style.height=(offsetheight+speed)+‘px‘; obj.style.width=(offsetwidth+speed)+‘px‘; clearTimeout(timer); timer=setTimeout(function(){ larger(obj, goal, speed); },50); } else{ clearTimeout(timer); } } div.onclick=function(){ larger(this, 400, 10); } } </script> </body> </html>
JavaScript之動畫縮放