案例-重力的弹弹球

仅一个文件直接看源码：重力的弹弹球#login{position:absolute;left:100px;top:0px;width:100px;height:100px;background:blue;border-radius:50%;cursor:pointer;box-shadow:0px 0px 22px #000;}wind

kaiking_g

708人浏览 · 2017-06-28 23:19:27

kaiking_g · 2017-06-28 23:19:27 发布

仅一个文件

直接看源码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>重力的弹弹球</title>
	<style>
		#login{position:absolute;left:100px;top:0px;width:100px;height:100px;background:blue;border-radius:50%;cursor:pointer;box-shadow:0px 0px 22px #000;}
	</style>
</head>
<body>
	<div id="login"></div>

	<script>
		window.onload = function(){
			var oLogin = document.getElementById('login');
			var timer = null,speedX = 0,speedY = 0;

			oLogin.onmousedown = function(e){
				var e = e || window.event;//获取event对象 兼容ie
				clearInterval(timer);
				var x = e.clientX,
				y = e.clientY,
				disX = x - oLogin.offsetLeft,
				disY = y - oLogin.offsetTop;

				document.onmousemove = function(e){
					var e = e || window.event;
					oLogin.style.left = e.clientX - disX +'px';//获取新的left值
					oLogin.style.top = e.clientY - disY + 'px';
					speedY = e.clientY - y;
					speedX = e.clientX -x;
					y = e.clientY;//当前坐标值在下一次就会变成上一次的值
					x = e.clientX;
				}

				document.onmouseup = function(e){
					document.onmousemove = null;
					document.onmouseup = null;
					startMove();
				}
			}


			startMove();
			function startMove(){
				clearInterval(timer);
				timer = setInterval(function(){
					speedY += 2;//垂直降落的速度；
					speedX *= 0.98;//惯性速度 慢慢变小
					var T = oLogin.offsetTop + speedY;
					t = document.documentElement.clientHeight - oLogin.offsetHeight,
					L = oLogin.offsetLeft + speedX,
					l = document.documentElement.clientWidth - oLogin.offsetWidth;

					if(T > t){
						T = t;
						speedY *= -1;//速度反方向
						speedY *= 0.75;//反弹后速度变慢
					}else if(T<0){
						T = 0;
						speedY *= -1;
						speedY *= 0.75;
					}

					if(L > l){
						L = l;
						speedX *= -1;
					}else if(L < 0){
						L = 0;
						speedX *= -1;
					}
					oLogin.style.top = T +'px';
					oLogin.style.left = L +'px';
				},13)
			}
		}

	</script>
</body>
</html>