<!--<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <style type="text/css"> </style> </head> <body> <div style="position:absolute;left:0;top:0;width:50px;height:50px;background-color:blue;"></div> <script type="text/javascript"> var div=document.getElementsByTagName(‘div‘)[0]; var disX, disY; div.onmousedown=function(e){ disX=e.pageX-parseInt(div.style.left); disY=e.pageY-parseInt(div.style.top); document.onmousemove=function(e){ var event=e||window.event; div.style.left=e.pageX-disX+"px"; div.style.top=e.pageY-disY+"px"; } document.onmouseup=function(){ div.onmousemove=null; } } </script> </body> </html>--> <!DOCTYPE html> <html lang="en"> <meta charset="utf-8"> <style> *{ margin:0px; padding:0px; } div{ width:100px; height:100px; background-color:black; left:0; top:0; position:absolute; opacity:1; } </style> <body> <div></div> <script> var div=document.querySelector(‘div‘); animate(div,{ width:200, left:500, opacity:20 }); function animate(el,properties){ clearInterval(el.timerId); el.timerId=setInterval(function(){ for(var property in properties){ var current; var target=properties[property]; if(property===‘opacity‘){ current=Math.round(parseFloat(getstyle(el,‘opacity‘))*100); }else{ current=parseInt(getstyle(el,property)); } var speed=(target-current)/30; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(property===‘opacity‘){ el.style.opacity=(current+speed)/100; }else{ el.style[property]=current+speed+‘px‘; } } },20) } function getstyle(el,property){ if(getComputedStyle){ return getComputedStyle(el)[property] }else{ return el.currentStyle[property]; } } </script> </body> </html>