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{ 200px; border:1px solid #000; border-10px;height:200px; background: #009; margin:30px; float:left; color:#FFFFFF; opacity:0.5; filter:alpha(opacity=50) }
  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,100,"opacity");
 36        //moveDiv(this,24,"fontSize");
 37  }
 38  obox.onmouseout=function(){    
 39      moveDiv(this,50,"opacity"); 
 40     // moveDiv(this,12,"fontSize");
 41  }
 42  
 43  obox1.onmouseover=function(){
 44       moveDiv(this,500,"height");
 45  }
 46  obox1.onmouseout=function(){    
 47      moveDiv(this,200,"height"); 
 48  }
 49  obox2.onmouseover=function(){
 50       moveDiv(this,32,"fontSize");
 51  }
 52  obox2.onmouseout=function(){    
 53      moveDiv(this,12,"fontSize"); 
 54  }
 55  obox3.onmouseover=function(){
 56       moveDiv(this,500,"width");
 57  }
 58  obox3.onmouseout=function(){    
 59      moveDiv(this,200,"width"); 
 60  }
 61  
 62  
 63 //获得样式值
 64 function getCss(obj,name){
 65   var res;
 66   if(obj.currentStyle){
 67       return obj.currentStyle[name];   
 68   }else{  
 69       return window.getComputedStyle(obj,null)[name]; 
 70   } 
 71 }
 72 
 73 
 74 //多物体运动框架
 75 function  moveDiv(obj,iTag,sty){
 76     //obj.timer=null
 77     var speed=10;
 78     clearInterval(obj.timer);
 79     obj.timer=setInterval(function(){
 80         var cur=0;
 81         if(sty=="opacity"){
 82             cur=Math.round(parseFloat(getCss(obj,sty))*100);    
 83         }else{    
 84            cur=parseInt(getCss(obj,sty)); 
 85         }
 86          speed=(iTag-cur)/6;
 87         speed=speed>0?Math.ceil(speed):Math.floor(speed); 
 88         if(cur==iTag){
 89            clearInterval(obj.timer);    
 90         }else{
 91             if(sty=="opacity"){
 92                 obj.style.filter='alpha(opacity='+(cur+speed)+')';
 93                 obj.style.opacity=(cur+speed)/100;
 94             }else{
 95                 obj.style[sty]=cur+speed+"px";
 96                 
 97             }
 98         }
 99         
100     },10);
101 
102 }
103 
104 </script>
105 
106 </body>
107 </html>
一个不敬业的前端攻城狮