js完美多物体运动框架（缓冲运动） 

  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 type="text/css">
  7 body{ margin:0; padding:0; }
  8 .ss{ width:200px; border:1px solid #000; border-width:10px;height:200px; background: #009; margin:30px; float:left; color:#FFFFFF; opacity:0.3; filter:alpha(opacity=30) }
  9 
 10 
 11 </style>
 12 </head>
 13 
 14 <body>
 15 
 16 <div class="ss" id="a">
 17 </div>
 18 <div class="ss" id="b">
 19 
 20 </div>
 21 <div class="ss" id="c">
 22 fdsfsfsfsdfsdfsdfs
 23 </div>
 24 <div class="ss" id="d">
 25 
 26 </div>
 27 
 28 
 29 <script type="text/javascript">
 30  var obox=document.getElementById("a");
 31  var obox1=document.getElementById("b");
 32   var obox2=document.getElementById("c");
 33  var obox3=document.getElementById("d");
 34  obox.onmouseover=function(){
 35       moveDiv(this,{"opacity":100});
 36        //moveDiv(this,24,"fontSize");
 37  }
 38  obox.onmouseout=function(){    
 39      moveDiv(this,{"opacity":30}); 
 40     // moveDiv(this,12,"fontSize");
 41  }
 42  
 43  obox1.onmouseover=function(){
 44       moveDiv(this,{"height":800},function(){moveDiv(obox1,{"width":500})});
 45  }
 46  obox1.onmouseout=function(){    
 47      moveDiv(this,{"width":200},function(){moveDiv(obox1,{"height":200})}); 
 48  }
 49  obox2.onmouseover=function(){
 50       moveDiv(this,{"fontSize":32});
 51  }
 52  obox2.onmouseout=function(){    
 53      moveDiv(this,{"fontSize":12}); 
 54  }
 55  obox3.onmouseover=function(){
 56       moveDiv(this,{"width":500,"height":800,"opacity":100});
 57  }
 58  obox3.onmouseout=function(){    
 59      moveDiv(this,{"width":200,"height":200,"opacity":30}); 
 60  }
 61  
 62  
 63  
 64  
 65 //获得样式值
 66 function getCss(obj,name){
 67   var res;
 68   if(obj.currentStyle){
 69       return obj.currentStyle[name];   
 70   }else{  
 71       return window.getComputedStyle(obj,null)[name]; 
 72   } 
 73 }
 74 
 75 function   getClass(obj,classstyle){
 76   var allobj=document.getElementsByTagName("*");
 77   var objarr=[];
 78   for(var i=0,len=allobj.length;i<len;i++){
 79        if(allobj[i].clasName==classstyle){
 80          objarr.push(allobj[i]);
 81        } 
 82   }    
 83        return objarr;      
 84 }
 85 //多物体运动框架
 86 function  moveDiv(obj,json,fn){
 87     //obj.timer=nul
 88        clearInterval(obj.timer);
 89            obj.timer=setInterval(function(){
 90            var bStop=true;           
 91            for(var attr in json){    
 92                 var speed=10;
 93                 var cur=0;
 94                 if(attr=="opacity"){
 95                     cur=Math.round(parseFloat(getCss(obj,attr))*100);    
 96                 }else{    
 97                    cur=parseInt(getCss(obj,attr)); 
 98                 }
 99                  speed=(json[attr]-cur)/6;
100                 speed=speed>0?Math.ceil(speed):Math.floor(speed); 
101                 if(cur!=json[attr]){
102                     bStop=false;
103                 }
104                 if(bStop){
105                    clearInterval(obj.timer);
106                    if(fn)fn();    
107                 }else{
108                     if(attr=="opacity"){
109                         obj.style.filter='alpha(opacity='+(cur+speed)+')';
110                         obj.style.opacity=(cur+speed)/100;
111                     }else{
112                         obj.style[attr]=cur+speed+"px";
113                         
114                     }
115                 }
116              }
117                 
118             },10);
119 
120 }
121 
122 </script>
123 
124 </body>
125 </html>

 

posted @ 2013-04-22 11:47  梦飞无颜  阅读(260)  评论(0)  编辑  收藏  举报