任意值运动框架
任意值运动框架思路：
1、任意值运动框架带有3个形参，第一个是obj对象，第二个是attr属性，第三个是iTarget对象运动的目标值。
2、清除当前对象的定时器 clearInterval(obj.timer)
3、设置定时器 obj.setInterval(function(){},30)
3.1、定义一个空的cur用来设置当前属性。
3.2、因为有时候是opacity透明度运动，所以就要用if else加一个判断
1 if(attr=='opacity'){ 2 cur=Math.round(parseFloat(getStyle(obj,attr))*100); //opacity要用parseFloat强制转换为浮点数才能起作用，因为浮点数习惯用整数表示所以乘以100。因为有些小数*100在计算机中会出现bug，会出现算不尽的数，所以要用Math.round()来四舍五入。 3 } 4 else{ 5 cur=parseInt(getStyle(obj,attr)); //getStyle获取样式 6 }
3.3、定义速度 var speed=(iTarget-cur)/6;
3.4、用三目运算符把速度向上取整和向下取整 speed=speed>0?Math.ceil(speed):Math.floor(speed);
3.5、用if else判断，如果对象的属性值已经等于目标值就清除定时器 clearInterval(obj.timer)
3.5.1、如果属性名为opacity就设置opacity的值
3.51.2、否则就设置其它的宽高值运动速度。
任意值运动框架代码：
1 function startMove(obj,attr,iTarget) //三个形参，第一个是对象obj，第二个是对象的属性名，第三个是对象运动的目标值 2 { 3 clearInterval(obj.timer); //清除当前对象的定时器 4 obj.timer=setInterval(function(){ //定义当前对象的定时器 5 var cur=0; 6 7 if(attr=='opacity') //如果attr属性是opacity时 8 { 9 cur=Math.round(parseFloat(getStyle(obj,attr))*100); //opacity要用parseFloat强制转换为浮点数才能起作用，因为浮点数习惯用整数表示所以乘以100。因为有些小数*100在计算机中会出现bug，会出现算不尽的数，所以要用Math.round()来四舍五入。 10 } 11 else 12 { 13 cur=parseInt(getStyle(obj,attr)); //把从对象获取到的属性值强制转换为整形 14 } 15 16 var speed=(iTarget-cur)/6; 17 speed=speed>0?Math.ceil(speed):Math.floor(speed); //用三目运算符，当速度大于0就向上取整，否则就向下取整，这样能避免缓冲运动出现bug 18 19 if(cur==iTarget) 20 { 21 clearInterval(obj.timer); 22 } 23 else 24 { 25 if(attr=='opacity') 26 { 27 obj.style.filter='alpha(opacity:'+(cur+speed)+')'; //IE 28 obj.style.opacity=(cur+speed)/100; 29 } 30 else 31 { 32 obj.style[attr]=cur+speed+'px'; 33 } 34 } 35 },30); 36 };
任意值运动框架应用实例完整代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>任意值运动框架</title> 6 <style> 7 div{margin:20px;} 8 #div{width:200px;height:200px;background:red;} 9 #div2{width:200px;height:200px;background:black;filter:alpha(opacity:30);opacity:0.3;} 10 </style> 11 <script> 12 window.onload=function() 13 { 14 var oDiv=document.getElementById('div'); 15 var oDiv2=document.getElementById('div2'); 16 17 oDiv.onmouseover=function() 18 { 19 startMove(this,'height',100) 20 }; 21 22 oDiv.onmouseout=function() 23 { 24 startMove(this,'height',200) 25 }; 26 27 oDiv2.onmouseover=function() 28 { 29 startMove(this,'opacity',100) 30 }; 31 32 oDiv2.onmouseout=function() 33 { 34 startMove(this,'opacity',30) 35 }; 36 }; 37 38 function getStyle(obj,name) 39 { 40 if(obj.currentStyle){ //获取对象属性的值 41 return obj.currentStyle[name]; 42 } 43 else{ //Chrome FireFox获取对象属性的值 44 return getComputedStyle(obj,false)[name]; 45 } 46 }; 47 48 function startMove(obj,attr,iTarget) 49 { 50 clearInterval(obj.timer); //清除当前对象的定时器 51 obj.timer=setInterval(function(){ //定义当前对象的定时器 52 var cur=0; 53 54 if(attr=='opacity'){ //如果attr属性是opacity时 55 cur=Math.round(parseFloat(getStyle(obj,attr))*100); //opacity要用parseFloat强制转换为浮点数才能起作用，因为浮点数习惯用整数表示所以乘以100。因为有些小数*100在计算机中会出现bug，会出现算不尽的数，所以要用Math.round()来四舍五入。 56 } 57 else{ 58 cur=parseInt(getStyle(obj,attr)); //把从对象获取到的属性值强制转换为整形 59 } 60 61 var speed=(iTarget-cur)/6; 62 speed=speed>0?Math.ceil(speed):Math.floor(speed); //用三目运算符，当速度大于0就向上取整，否则就向下取整，这样能避免缓冲运动出现bug 63 64 if(cur==iTarget){ 65 clearInterval(obj.timer); 66 } 67 else{ 68 if(attr=='opacity'){ 69 obj.style.filter='alpha(opacity:'+(cur+speed)+')'; //IE 70 obj.style.opacity=(cur+speed)/100; 71 72 document.getElementById('txt1').value=obj.style.opacity; 73 } 74 else{ 75 obj.style[attr]=cur+speed+'px'; 76 } 77 } 78 },30); 79 }; 80 </script> 81 </head> 82 83 <body> 84 <div id="div"></div> 85 <div id="div2"></div> 86 <input type="text" id="txt1" /> 87 </body> 88 </html>
