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