弹性运动框架

弹性运动框架,多物体,单物体
  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>