首页 > 代码库 > 图片的逐渐显示与消失
图片的逐渐显示与消失
<!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=http://www.mamicode.com/"tadu1.jpg" id="img1" alt="塔读" />>
图片的逐渐显示与消失
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。