刮刮乐

最新推荐文章于 2021-11-18 13:49:17 发布

小森呀

最新推荐文章于 2021-11-18 13:49:17 发布

阅读量167

点赞数

分类专栏：小案例

本文链接：https://blog.csdn.net/KEY2018/article/details/115806218

版权

小案例专栏收录该内容

13 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>刮刮乐</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      .box {
        width: 500px;
        height: 100px;
        margin: auto;
        margin-top: 200px;
        position: relative;
        -webkit-user-select: none; /* 禁止复制文字 */
      }

      .text {
        text-align: center;
        line-height: 100px;
        font-size: 50px;
      }

      .bg {
        position: absolute;
        top: 0px;
        left: 0px;
      }

      .bg div {
        width: 10px;
        height: 10px;
        background-color: gray;
        float: left;
      }
    </style>
    <script src="./jquery-3.5.1.js"></script>
  </head>
  <body>
    <div class="box">
      <div class="text">谢 谢 惠 顾 !</div>
      <div class="bg"></div>
    </div>
  </body>
  <script type="text/javascript">
    var w = $(".box").width();
    var h = $(".box").height();
    for (var i = 0; i < (w * h) / 100; i++) {
      $(".bg").append("<div>");
    }
    var key = 0;
    $(".bg").mousedown(function () {
      key = 1;
    });
    $(".bg").mouseup(function () {
      key = 0;
    });
    $(".bg div").mousemove(function () {
      if (key == 1) {
        $(this).css({
          opacity: 0,
        });
      }
    });
  </script>
</html>

小森呀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
刮刮乐

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.
复制链接

扫一扫

专栏目录