<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#divid{
height: 200px;
width: 200px;
background-color: red;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
opacity: 0.3;
}
</style>
<script>
window.onload=function () {
var oDiv = document.getElementById("divid");
oDiv.onmouseover= function () {
startMove(100);
};
oDiv.onmouseout= function () {
startMove(30);
};
}
var alpha = 30;
var timer = null;
var startMove = function (iTarget) {
var oDiv =document.getElementById("divid");
clearInterval(timer);
timer = setInterval(function () {
var speed = 0;
//由於iTarget的不同來決定是正向還是負向來變化
if(alpha<iTarget){
speed = 1;
}else {
speed = -1;
}
//透明度是否達到目標，達到了就清除定時器
if (alpha == iTarget){
clearInterval(timer);
}else{
alpha+=speed;
oDiv.style.filter= "progid:DXImageTransform.Microsoft.Alpha(Opacity="+alpha+")";
oDiv.style.opacity = alpha/100;
}
},30);
}
</script>
</head>
<body>
<div id="divid"></div>
</body>
</html>動畫——透明度
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章