<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>平抛运动运动</title>
<style>
body{margin: 0px;padding: 0px;}
.animation{
background-color: green;
height: 20px;
20px;
left: 0px;
top: 0px;
border-radius: 10px;
position: absolute;
}
</style>
</head>
<body>
<div id="test" class="animation"></div>
</body>
<script type="text/javascript">
window.onload = function(){
var ele = document.getElementById("test"),
WINDOW_WIDTH = window.innerWidth - 20;
WINDOW_HEIGHT = window.innerHeight - 20;
ele.timer = null;
ele.onmouseover =function(){
startAnimation(this);
}
function startAnimation(obj){
clearInterval(obj.timer);
var V_x = 30,
G_y = 1,
t = 0;
obj.timer = setInterval(function(){
t++;
var _left = obj.offsetLeft,
_height = obj.offsetTop,
_S_x = V_x*t,
_S_y = G_y*t*t/2 ;
if(_S_x >= WINDOW_WIDTH){
obj.style.left = WINDOW_WIDTH +'px';
obj.style.top = _S_y +'px';
clearInterval(obj.timer);
}else if(_S_y >= WINDOW_HEIGHT){
obj.style.left = _S_x +'px';
obj.style.top = WINDOW_HEIGHT +'px';
clearInterval(obj.timer);
}else{
obj.style.left = _S_x +'px';
obj.style.top = _S_y +'px';
}
},100)
}
}
</script>
</html>