弹力球实现教程-前端--易笔记

弹力球实现教程

<!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>
时间：2017/11/27 15:28:39

弹力球实现教程
