陈尚涵 发表于 2020-7-27 09:10:41

触碰方块掉落效果

本帖最后由 陈尚涵 于 2021-5-4 10:52 编辑

图片自己找吧       

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>触碰方块掉落效果</title>
    <style type="text/css">
      * {
            padding: 0;
            margin: 0;
      }

      body {
            background-image: url("images/background2.png");
            background-size: 110%;
            background-repeat: no-repeat;
      }

      #div {
            position: absolute;
            left: 0%;
            top: 1%;
      }
    </style>
</head>
<body>
<div id="div"></div>
<script src="jquery-1.7.2/jquery1.7.2.js"></script>
<script>
        var speed;
    for (var a = 0; a < 21; a++) {
      for (var b = 0; b < 46; b++) {
            var $ele = $('<div style="position: absolute; width: 136px; height: 30px; border: 1px solid #000; background-color: #38ff0f;"></div>');
            $ele.css('left', a*(parseInt($ele.css('width'))));
            $ele.css('top', b*(parseInt($ele.css('height'))));
            $('#div').append($ele);
      }
    }

    $('#div').delegate('div', 'mouseover', function () {
      speed = 40;
      var $obj = $(this);
      $(this).css('backgroundColor', 'red');
      var timer = setInterval(function () {
            if(parseInt($obj.css('top')) < 1350) {
                $obj.css('zIndex', '9999');
                if(parseInt($obj.css('top')) + speed > 1350) {
                  $obj.css('top', 1350)
                }
                else {
                                        speed += 0.0198;
                  $obj.css('top', parseInt($obj.css('top')) + speed)
                }
            }
            else {
                $obj.remove();
                clearInterval(timer);
            }
      }, 30)

    })
</script>
</body>
</html>

weiter 发表于 2020-7-27 19:15:39

不是，没显示东西啊{:10_277:}

陈尚涵 发表于 2021-5-4 10:52:00

weiter 发表于 2020-7-27 19:15
不是，没显示东西啊

额你没图片。。。
页: [1]
查看完整版本: 触碰方块掉落效果