1、blue老师编写完美运动框架，随意调用（可多次），兼容性好，用于多个物体多次运动（不是同时运动）
1 function getStyle(obj, name) 2 { 3 if(obj.currentStyle) 4 { 5 return obj.currentStyle[name]; 6 } 7 else 8 { 9 return getComputedStyle(obj, false)[name]; 10 } 11 } 12 13 function startMove(obj, attr, iTarget, fnEnd) 14 { 15 clearInterval(obj.timer); 16 obj.timer=setInterval(function (){ 17 var cur=0; 18 19 if(attr=='opacity') 20 { 21 cur=Math.round(parseFloat(getStyle(obj, attr))*100); 22 } 23 else 24 { 25 cur=parseInt(getStyle(obj, attr)); 26 } 27 28 var speed=(iTarget-cur)/6; 29 speed=speed>0?Math.ceil(speed):Math.floor(speed); 30 31 if(cur==iTarget) 32 { 33 clearInterval(obj.timer); 34 35 if(fnEnd)fnEnd(); 36 } 37 else 38 { 39 if(attr=='opacity') 40 { 41 obj.style.filter='alpha(opacity:'+(cur+speed)+')'; 42 obj.style.opacity=(cur+speed)/100; 43 } 44 else 45 { 46 obj.style[attr]=cur+speed+'px'; 47 } 48 } 49 }, 30); 50 }
调用：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 {width:100px; height:100px; background:red; filter:alpha(opacity:30); opacity:0.3;} 8 </style> 9 <script src="move.js"></script> 10 <script> 11 window.onload=function () 12 { 13 var oDiv=document.getElementById('div1'); 14 15 oDiv.onmouseover=function () 16 { 17 startMove(oDiv, 'width', 300, function (){ 18 startMove(oDiv, 'height', 300, function (){ 19 startMove(oDiv, 'opacity', 100); 20 }); 21 }); 22 }; 23 24 oDiv.onmouseout=function () 25 { 26 startMove(oDiv, 'opacity', 30, function (){ 27 startMove(oDiv, 'height', 100, function (){ 28 startMove(oDiv, 'width', 100); 29 }); 30 }); 31 }; 32 }; 33 </script> 34 </head> 35 36 <body> 37 <div id="div1"></div> 38 </body> 39 </html>
2、blue老师编写完美运动框架，随意调用（可多次），兼容性好，用于多个物体多次运动（同时运动）
1 function getStyle(obj, name) 2 { 3 if(obj.currentStyle) 4 { 5 return obj.currentStyle[name]; 6 } 7 else 8 { 9 return getComputedStyle(obj, false)[name]; 10 } 11 } 12 13 function startMove(obj, json, fnEnd) 14 { 15 clearInterval(obj.timer); 16 obj.timer=setInterval(function (){ 17 var bStop=true; //假设：所有值都已经到了 18 19 for(var attr in json) 20 { 21 var cur=0; 22 23 if(attr=='opacity') 24 { 25 cur=Math.round(parseFloat(getStyle(obj, attr))*100); 26 } 27 else 28 { 29 cur=parseInt(getStyle(obj, attr)); 30 } 31 32 var speed=(json[attr]-cur)/6; 33 speed=speed>0?Math.ceil(speed):Math.floor(speed); 34 35 if(cur!=json[attr]) 36 bStop=false; 37 38 if(attr=='opacity') 39 { 40 obj.style.filter='alpha(opacity:'+(cur+speed)+')'; 41 obj.style.opacity=(cur+speed)/100; 42 } 43 else 44 { 45 obj.style[attr]=cur+speed+'px'; 46 } 47 } 48 49 if(bStop) 50 { 51 clearInterval(obj.timer); 52 53 if(fnEnd)fnEnd(); 54 } 55 }, 30); 56 }
调用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title>
<script src="move.js"></script> <script type="text/javascript"> window.onload = function(){ var odiv1 = document.getElementById('div1'); var odiv2 = document.getElementById('div2'); var odiv3 = document.getElementById('div3'); var odiv4 = document.getElementById('div4'); odiv1.onmouseover = function(){ startMove(odiv1, {200, height:200, opacity:30}); } odiv2.onmouseover = function(){ startMove(odiv2, {200, height:200, opacity:30}); } odiv3.onmouseover = function(){ startMove(odiv3, {200, height:200, opacity:30}); } odiv4.onmouseover = function(){ startMove(odiv4, {height:220}); } } </script> <style type="text/css"> #div1,#div2,#div3,#div4{width:100px; height:100px; background:red; float:left; margin-left:20px; border:5px solid black;} </style> </head> <body> <div id='div1'></div> <div id='div2'></div> <div id='div3'></div> <div id='div4'></div> </body> </html>