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.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>