Div的移動和變化

時間 2019-11-07

標籤 div 移動變化欄目 CSS 简体版

原文原文鏈接

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。