js做图片动态

这是老师讲的一个有意思的知识点，是一个动态网页，如下是要求和代码：

  1. 点击按钮后，按钮变为不可用状态，图片逐渐由看不见到模糊，最后清晰显示
  2. 图片清晰显示后，按钮变为可用状态，同时按钮文字变为"隐藏图片"
  3. 再点击按钮，按钮又变为不可用状态，同时图片慢慢模糊，直到消失，消失后按钮变为可用，同时按钮文字提示："显示图片"

 

 

 <!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="1.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;m
  img1.style.opacity=opnum;
  img1.style.display="block";
  if(opnum<=0){
  button.disabled=false;
  button.innerHTML="显示图片";
  clearInterval(imgtime);
  img1.style.display="none ";
  }
  }
  document.getElementById("cd").onclick=function(){
  var button=document.getElementById("cd");
  var img1 = document.images[0];
  // 图片的透明度
  img1.style.opacity=0;
  // 图片的隐藏
  img1.style.display="inline";
  // 按钮变为可用
  button.disabled = true;
  // 图片出现的时间和隐藏的时间
  if(button.innerHTML=="显示图片"){
  imgtime=setInterval(show, 100);
  }
  else{
  imgtime=setInterval(hidden, 100);
  }
  }
  </script>
   
  </body></html>

 

posted on 2017-03-17 13:14  小小的西红柿  阅读(1269)  评论(0)    收藏  举报

导航