1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 {width:100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px; left: 400px;} 8 </style> 9 <script> 10 window.onload = function() { 11 12 var oDiv1 = document.getElementById('div1'); 13 14 oDiv1.onclick = function() { 15 16 startMove(this, { 17 width : 200 18 }, 10, function() { 19 startMove(this, { 20 height : 200 21 }, 10); 22 }); 23 } 24 25 function startMove(obj, json, iSpeed, fn) { 26 clearInterval(obj.iTimer); 27 var iCur = 0; 28 29 obj.iTimer = setInterval(function() { 30 31 var iBtn = true; 32 33 for ( var attr in json ) { 34 35 var iTarget = json[attr]; 36 37 if (attr == 'opacity') { 38 iCur = Math.round(css( obj, 'opacity' ) * 100); 39 } else { 40 iCur = parseInt(css(obj, attr)); 41 } 42 43 if (iCur != iTarget) { 44 iBtn = false; 45 if (attr == 'opacity') { 46 obj.style.opacity = (iCur + iSpeed) / 100; 47 obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')'; 48 } else { 49 obj.style[attr] = iCur + iSpeed + 'px'; 50 } 51 } 52 53 } 54 55 if (iBtn) { 56 clearInterval(obj.iTimer); 57 fn && fn.call(obj); 58 } 59 60 }, 30); 61 } 62 63 function css(obj, attr) { 64 if (obj.currentStyle) { 65 return obj.currentStyle[attr]; 66 } else { 67 return getComputedStyle(obj, false)[attr]; 68 } 69 } 70 71 } 72 </script> 73 </head> 74 75 <body> 76 <div id="div1"></div> 77 </body> 78 </html>