蹦蹦球效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蹦蹦球</title>
<style>
.ball {
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div id="ball" class="ball"></div>
<script>
var ball = document.getElementById("ball");
var a = {
x: 100,
y: 50,
r: 25,
w: 4,
h: 5,
g: 2,
color: "blue"
}
ball.style.left = a.x + "px"; //初始位置
ball.style.top = a.y + "px";
ball.style.width = a.r * 2 + "px"; //球的参数
ball.style.height = a.r * 2 + "px";
ball.style.background = a.color; //颜色
var time = setInterval(function() {
a.x += a.w; //移动距离
a.y += a.h;
a.h += a.g; //掉落加速
ball.style.top = a.y + "px";
ball.style.left = a.x + "px";
if (a.y > 500) { //漂移+回弹
a.h = -a.h * 0.8;
}
}, 50);
</script>
</body>
</html>
