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>