触碰方块掉落效果

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

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由陈尚涵于 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

不是，没显示东西啊

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

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

额你没图片。。。

账号		自动登录	找回密码
密码			立即注册

[作品展示] 触碰方块掉落效果