Div的移動和變化

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>多個DIV任意變化</title>
 <style type="text/css">
  div{
   width: 150px;
   height: 100px;
   background: #f00;
   margin:20px;
   opacity:0.3;
   filter:alpha(opacity=30);
   overflow:;
  }
 </style>
 <script type="text/javascript">
 window.onload = function(){
  var aDiv = document.getElementsByTagName("div");
  aDiv[0].onmouseover = function(){startMove(this,"width",400);}
  aDiv[0].onmouseout = function(){startMove(this,"width",150);}
  aDiv[1].onmouseover = function(){startMove(this,"height",400);}
  aDiv[1].onmouseout = function(){startMove(this,"height",100);}
  aDiv[2].onmouseover = function(){startMove(this,"opacity",100);}
  aDiv[2].onmouseout = function(){startMove(this,"opacity",30);}
}
 function startMove(obj,attr,iTarget){
  clearInterval(obj.timer);
  obj.timer = setInterval(function(){
var iCur = 0;
  if(attr == "opacity"){
    iCur = parseInt(parseFloat(getStyle(obj,attr))*100);
  }else{
    iCur = parseInt(getStyle(obj,attr));
  }
  var iSpeed = (iTarget - iCur)/8;
  iSpeed = iSpeed > 0 ? Math.ceil(iSpeed):Math.floor(iSpeed);
  if(iCur == iTarget){
   clearInterval(obj.timer);
  }else{
   if(attr == "opacity"){
    iCur+=iSpeed;
    obj.style.filter = "alpha(opacity="+(iCur+iSpeed)+")";
    obj.style.opacity = (iCur+iSpeed)/100;
   }else{
    obj.style[attr]= iCur+iSpeed+"px";
   }
  }
  },30)
  
 }
 function getStyle(obj,attr){
  if(obj.currentStyle){
   return obj.currentStyle[attr];
  }else{
   style = window.getComputedStyle(obj,false)[attr];
  }
  return style;
 }
 </script>
</head>
<body>
 <div id="div1"></div>
 <div id="div2"></div>
 <div id="div3">多個DIV任意變化</div>
</body>
</html>
相關文章
相關標籤/搜索