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>