<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width:100px; height:50px; background:yellow; margin:20px; margin-bottom:none; } </style> </head> <script type="text/javascript"> window.onload = function(){ var list=document.getElementsByTagName("div"); for(var i=0 ; i<list.length ; i++){ list[i].tim=null; list[i].onmouseover=function(){ var g=this; change(this,"width",200,function(){ change(g,"height",100); }); } list[i].onmouseout=function(){ change(this,"width",100); } } } function getAttr(obj,att){ if(obj.currentStyle){ return obj.currentStyle[att]; }else{ return getComputedStyle(obj,false)[att]; } } function change(obj,att,iTarget,fn){ var speed=null; clearInterval(obj.tim); obj.tim=setInterval(function(){ var geta=parseInt(getAttr(obj,att)) speed=(iTarget-geta)/20; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(geta==iTarget){ if(fn){ fn(); } clearInterval(obj.tim); }else{ obj.style[att]=geta+speed+"px"; } },30) } </script> <body> <div id="d1"> </div> <div id=""> </div> <div id=""> </div> </body></html>
添加回答
举报
0/150
提交
取消