js反弹运动
<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8"> ???????<title></title> ????????<style> ???????.ball { ???????????width: 30px; ???????????height: 30px; ???????????border-radius: 50%; ???????????position: absolute; ???????????top: 200px; ???????????left: 0; ???????????background: skyblue; ???????} ???</style> ???</head> ???<body> ???????<button>飞起来</button> ???????<div class="ball"></div> ???????<!-- <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script> --> ???????<script type="text/javascript"> ???????????var speedX=6; ???????????var speedY=-10; ???????????var timer=null; ???????????var btn = document.querySelector("button"); ???????????var ball = document.querySelector(".ball"); ???????????btn.onclick=function(){ ???????????????clearInterval(timer); ???????????????timer=setInterval(function(){ ????????????????????ball.style.left=ball.offsetLeft+speedX+"px"; ????????????????????ball.style.top=ball.offsetTop+speedY+"px"; ?????????????????????var maxT=window.innerHeight-ball.offsetHeight; ????????????????????var maxL=window.innerWidth-ball.offsetWidth; ????????????????????if(ball.offsetTop<0){ ???????????????????????speedY*=-1; ???????????????????????ball.style.top=0; ????????????????????}else if(ball.offsetTop>maxT){ ???????????????????????speedY*=-1; ???????????????????????ball.style.top=maxT+"px"; ????????????????????} ????????????????????if(ball.offsetLeft<0){ ????????????????????????ball.style.left=0; ?????????????????????????speedX*=-1; ????????????????????}else if(ball.offsetLeft>maxL){ ????????????????????????ball.style.left=maxL+"px"; ????????????????????????speedX*=-1; ????????????????????} ?????????????????????????????????????} ???????????????,30) ???????????} ???????</script> ???</body></html>js反弹运动
原文地址：https://www.cnblogs.com/lxystar/p/10471640.html