马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
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>
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-7-27 09:10:41
置顶卡
千斤顶
显身卡
发表于 2020-7-27 19:15:39
楼主