<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片的逐渐显示与消失</title>
<style type="text/css">
img {
opacity: 0.6;
filter: alpha(opacity=60);
}
</style>
</head>
<script type="text/javascript">
window.onload = function() {
var oImg = document.getElementById("img1");
var oBtnChange2=document.getElementById("btnChange2");
var oBtnChange = document.getElementById("btnChange");
var iAlpha = 60;//用来定义默认的图片的透明度
oBtnChange.onclick=function(){//逐渐显示
iAlpha=0;
oImg.style.opacity=0;//设置透明度
oImg.style.filter='alpha(opacity=0)';//设置透明度 IE
changeOpacity(oImg,100);
};
oBtnChange2.onclick = function() {//逐渐消失
iAlpha=100;
oImg.style.opacity=1;//设置透明度
oImg.style.filter='alpha(opacity=100)';//设置透明度 IE
changeOpacity(oImg, 0);
};
var oTimer = null;
//定时器
function changeOpacity(obj, iTarget) {
clearInterval(oTimer);
//关闭定时器
var iSpeed = 0;
//速度
if (iAlpha < iTarget) {
iSpeed = 10;
} else {
iSpeed = -10;
};
oTimer = setInterval(function() {
if (iAlpha == iTarget) {
clearInterval(oTimer);
} else {
iAlpha += iSpeed;
//设置透明度
obj.style.opacity = iAlpha / 100;
obj.style.filter = "alpha(opacity=" + iAlpha + ")";
};
}, 1000);
}
};
</script>
<body>
<img src="tadu1.jpg" id="img1" alt="塔读" />
<input type="button" id="btnChange" value="图片逐渐显示" />
<input type="button" id="btnChange2" value="图片逐渐消失" />
</body>
</html>
版权声明：本文博主原创文章。博客，未经同意不得转载。