码迷,mamicode.com
首页 > 其他好文 > 详细

前端小demo——遮罩层逐渐变透明

时间:2018-06-04 16:27:32      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:触发事件   遮罩层   AC   doctype   点击事件   color   imei   UNC   document   

点击按钮触发事件使遮罩层逐渐变透明

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    img {
      width: 430px;
      height: 280px;
    }

    div {
      width: 1600px;
      height: 300px;
      background-color: black;
      position: absolute;
      left: 4px;
      top: 4px;
    }

    input {
      position: absolute;
      left: 0;
      bottom: -20px;

    }
  </style>
</head>

<body>
  <img src="img/lzz3.jpg" alt="" />
  <img src="img/lzz5.jpg" alt="" />
  <img src="img/lzz4.jpg" alt="" />
  <div id="div">
    <input type="button" value="变透明" id="btn" />
  </div>

  <script src="common.js"></script>
  <script>
    //注册点击事件,添加事件处理函数
    function zy$(id) {
      return document.getElementById(id)
    };
    zy$("btn").onclick = function () {

      var opacity = 10;
      var timeId = setInterval(function () {
        opacity--;
        zy$("div").style.opacity = opacity / 10;
        if (opacity <= 0) {
          clearInterval(timeId);
        }
      }, 100)
    }
  </script>
</body>

</html>

 

前端小demo——遮罩层逐渐变透明

标签:触发事件   遮罩层   AC   doctype   点击事件   color   imei   UNC   document   

原文地址:https://www.cnblogs.com/yuebanzhou/p/9133318.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!