当时试着做这个的时候
完全是一脸茫然
不知道怎么去做
包括老师做了淡入之后
也感觉有点懵
淡出的效果吧，是自己后面做的
总的来说！这个效果超赞
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
综合练习六
</div>
<div>
<img src="images/1.jpg" alt="" style="display: none;" width="192"/>
</div>
<br/><br/>
<button id="btnshow">显示图片</button>
<ol>要求：
<li>点击按钮后，按钮变为不可用状态，图片逐渐由看不见到模糊，最后清晰显示</li>
<li>图片清晰显示后，按钮变为可用状态，同时按钮文字变为"隐藏图片"</li>
<li>再点击按钮，按钮又变为不可用状态，同时图片慢慢模糊，直到消失，消失后按钮变为可用，同时按钮文字提示："显示图片"</li>
</ol>
<div></div>
<script>
var opnum=0.02, imgtime;
function showimg(){
var btn=document.getElementById("btnshow");
var img3 = document.images[0];
if(btn.innerHTML=="显示图片"){
opnum+=0.02;
}
else{
opnum-=0.02;
}
img3.style.opacity=opnum;
img3.style.display='inline';
if(opnum>=1){
btn.disabled=false;
btn.innerHTML="隐藏图片";
clearInterval(imgtime);
}
else if(opnum<=0){
btn.disabled=false;
btn.innerHTML="显示图片";
clearInterval(imgtime);
}
}
document.getElementById('btnshow').onclick=function(){
var img3 = document.images[0];
img3.style.opacity=0;
img3.style.display='inline';
this.disabled = true;
imgtime=setInterval(showimg, 200);
}
</script>
</body>
</html>