图片的显示和隐藏
<!DOCTYPE html>
<!-- saved from url=(0074)http://localhost:63342/%E7%A8%8B%E5%86%AC/%E7%BB%83%E4%B9%A0/lianxi40.html -->
<html><head lang="en"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<div>
综合练习六
</div>
<div>
<img src="psb.jpg" alt="" style="display: none;" width="250">
</div>
<br><br>
<button id="cd">显示图片</button>
<ol>要求：
<li>点击按钮后，按钮变为不可用状态，图片逐渐由看不见到模糊，最后清晰显示</li>
<li>图片清晰显示后，按钮变为可用状态，同时按钮文字变为"隐藏图片"</li>
<li>再点击按钮，按钮又变为不可用状态，同时图片慢慢模糊，直到消失，消失后按钮变为可用，同时按钮文字提示："显示图片"</li>
</ol>
<div></div>
<script>
var opnum=0.02, imgtime;
function show(){
var button=document.getElementById("cd");
var img1 = document.images[0];
opnum+=0.02;
img1.style.opacity=opnum;
img1.style.display="block";
if(opnum>=1){
button.disabled=false;
button.innerHTML="隐藏图片";
clearInterval(imgtime);
}
}
function hidden(){
var button=document.getElementById("cd");
var img1 = document.images[0];
opnum-=0.02;
img1.style.opacity=opnum;
img1.style.display="block";
if(opnum<=0){
button.disabled=false;
button.innerHTML="显示图片";
clearInterval(imgtime);
}
}
document.getElementById("cd").onclick=function(){
var button=document.getElementById("cd");
var img1 = document.images[0];
// 图片的透明度
img1.style.opacity=0;
// 图片的隐藏
img1.style.display="block";
// 按钮变为可用
button.disabled = true;
// 图片出现的时间和隐藏的时间
if(button.innerHTML=="显示图片"){
imgtime=setInterval(show, 100);
}
else{
imgtime=setInterval(hidden, 100);
}
}
</script>
</body>
</html>
