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

Posted 2020-11-10 yuebanzhou

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端小demo——遮罩层逐渐变透明相关的知识，希望对你有一定的参考价值。

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

<!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——遮罩层逐渐变透明的主要内容，如果未能解决你的问题，请参考以下文章

前端页面给指定的div添加遮罩层，并且带有加载中的小旋转图片