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

最新推荐文章于 2021-10-14 19:59:36 发布

weixin_30644369

最新推荐文章于 2021-10-14 19:59:36 发布

阅读量149

点赞数

原文链接：http://www.cnblogs.com/yuebanzhou/p/9133318.html

版权

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

<!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>

转载于:https://www.cnblogs.com/yuebanzhou/p/9133318.html

weixin_30644369

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端小demo——遮罩层逐渐变透明

点击按钮触发事件使遮罩层逐渐变透明<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> img { width: 430px;...
复制链接

扫一扫