當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Div的移动和变化

發布時間：2024/4/15 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 Div的移动和变化小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2019獨角獸企業重金招聘Python工程師標準>>>

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

轉載于:https://my.oschina.net/u/1403159/blog/184031

以上是生活随笔為你收集整理的Div的移动和变化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。