核心提示：弹力球实现教程!doctype htmlhtmlheadmeta charset=utf-8title无标题文档/titlestylebody {margin: 0;padding: 0;}#ball...
弹力球实现教程
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body {
margin: 0;
padding: 0;
}
#ball {
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
background-color: #f60;
border-radius: 50%;
}
</style>
</head>
<body>
<p id="ball"></p>
<script>
var winWidth = document.documentElement.clientWidth; //窗口宽度
var winHeight = document.documentElement.clientHeight; //窗口的高度
var ball = document.getElementById('ball'); //获取球元素
var ballW = ball.offsetWidth; //球的宽度
var ballH = ball.offsetHeight; //球的高度
var ballX = 0; //默认x坐标值
var ballY = 0; //默认y坐标值
var ballXSpeed = 2; //横向速度
var ballYSpeed = 2; //纵向速度
setInterval(function(){ //定时器
//////////水平移动
ballX+=ballXSpeed;
if(ballX >= winWidth-ballW) { //到达右边界
ballXSpeed = - ballXSpeed; //反方向移动
}else if(ballX <= 0){ //到达左边界
ballXSpeed= -ballXSpeed; //反方向移动
}
ball.style.left = ballX + 'px'; //水平移动
//////////垂直移动
ballY+=ballYSpeed;
if(ballY >= winHeight-ballH) { //到达下边界
ballYSpeed = - ballYSpeed; //反方向移动
}else if(ballY <= 0){ //到达上边界
ballYSpeed= -ballYSpeed; //反方向移动
}
ball.style.top = ballY + 'px'; //垂直移动
},10);
</script>
</body>
</html>
