弹性运动框架,多物体,单物体
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>9.弹性运动框架</title> 8 <meta name="author" content="Administrator" /> 9 <!-- Date: 2014-12-14 --> 10 <style> 11 *{margin:0;padding:0} 12 #div1{width:100px;height:100px;position:absolute;background:red;left:0;top:0} 13 #line{width:1px;height:500px;background:#000000;position:absolute;left:500px;} 14 </style> 15 </head> 16 <body> 17 <div id="div1"></div> 18 <div id="line"></div> 19 <script> 20 21 /** 23 if(!obj.oSpeed)obj.oSpeed={}; 24 如果obj对象上没有oSpeed这个自定义属性，就定义一个。值是一个空对象，可以理解为是一个空json。 25 27 if(!obj.oSpeed[attr])obj.oSpeed[attr]=0; 29 上面已经定义自定义oSpeed属性了，所以这里是判断这个自定义属性里有没有attr这个属性，没有的话就定义一个，并设置初始值为0。 30 **/ 31 32 var oDiv1=document.getElementById('div1'); 33 34 //aa(oDiv1,'left',500); 35 36 bb(oDiv1,{'left':500,'top':200}) 37 38 /**多物体弹性运动框架**/ 39 function bb(obj,json){ 40 41 clearInterval(obj.timer); 42 43 obj.timer=setInterval(function(){ 44 45 var iBtn = true; 46 47 for( var attr in json ){ 48 /**代码块**/ 49 if( !obj.iSpeed ) obj.iSpeed={}; 50 if( !obj.iSpeed[attr] ) obj.iSpeed[attr]=0; 51 52 var iTarget = json[attr]; 53 var iCur = parseInt( getStyle( obj,attr ) ); 54 55 obj.iSpeed[attr] += (iTarget - iCur)/6; 56 obj.iSpeed[attr] *= 0.75; 57 58 if( Math.abs(obj.iSpeed[attr]) <=1 && Math.abs( iTarget - iCur )<=1 ){ 59 obj.iSpeed[attr]=0; 60 obj.style[attr] = iTarget +'px' 61 }else{ 62 iBtn = false; 63 var sNow= iCur + obj.iSpeed[attr]; 64 if( sNow < 0 ) sNow =0; 65 obj.style[attr] = sNow +'px'; 66 } 67 document.title = iCur +'-'+obj.iSpeed[attr]; 68 /**代码块**/ 69 } 70 71 if( iBtn ){ 72 clearInterval( obj.timer ); 73 74 } 75 76 77 },30) 78 } 79 82 /**单物体 弹性运动框架**/ 83 function aa(obj,attr,iTarget){ 84 85 obj.iSpeed=0; 86 87 clearInterval(obj.timer); 88 89 obj.timer=setInterval(function(){ 90 var iCur = parseInt( getStyle( obj,attr ) ); 91 92 obj.iSpeed += (iTarget - iCur)/6; 93 obj.iSpeed *= 0.75; 94 95 if( Math.abs(obj.iSpeed) <=1 && Math.abs( iTarget - iCur )<=1 ){ 96 clearInterval(obj.timer); 97 obj.iSpeed=0; 98 obj.style[attr] = iTarget +'px' 99 }else{ 100 var sNow= iCur + obj.iSpeed; 101 if( sNow < 0 ) sNow =0; 102 obj.style[attr] = sNow +'px'; 103 } 104 document.title = iCur +'-'+obj.iSpeed; 105 106 },30) 107 } 108 109 110 /**getStyle getStyle 是带单位的,所以一定要结合parseInt来使用**/ 111 function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } 112 113 114 </script> 115 </body> 116 </html>