小白写的一个简简单单的掉钱动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搞钱</title>
<script src="../jquery-1.11.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#box {
width: 100%;
height: 100%;
background-color: #000;
position: relative;
}
span {
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
function money() {
let span = $("<span>¥</span>");
let left = Math.random() * 1200;//随机生成
span.css({
"color": "red",
"font-size": "30px",
"top": "0",
"left": left + "px"
})
$("#box").append(span);
span.animate({
"top": "700px",
"left": "left"
}, 1000, function () {
$(this).remove();//移出
})
}
setInterval(money, 1000);
</script>
</body>
</html>
对了
这里面要注意的是
你自己注意点