弹性小球 ~ 注释详细

弹性小球

源码

css代码

<style type="text/css">
			html,body{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background: #FF0000;
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>

html代码

<div id="box"></div>

js 代码 注释详细

<script type="text/javascript">
			var oBox = document.getElementById("box");
			var lastX = 0; //最后的位置
			var lastY = 0; //最后的位置
			var speedX = 0; //速度
			var speedY = 0; //速度 
			var timer = null;
			//拖拽
			oBox.onmousedown = function(evt){
				var e = evt || window.event;
				//鼠标的相对坐标值
				var disX = e.offsetX;
				var disY = e.offsetY;
				//右边界值与下边界值
				maxL = document.documentElement.clientWidth - oBox.offsetWidth;
				maxT = document.documentElement.clientHeight - oBox.offsetHeight;
				document.onmousemove = function(evt){
					var e = evt || window.event;
					//当前的坐标值
					var left = e.clientX - disX;
					var top = e.clientY - disY;
					//左边界
					if(left <= 0){
						left = 0;
					}else if(left >= maxL){ //右边界
						left = maxL;
					}
					//上边界
					if(top <= 0){
						top = 0;
					}else if(top >= maxT){
						top = maxT;
					}
					//设置盒子的坐标
					oBox.style.left = left +'px';
					oBox.style.top = top + 'px';
					
					speedX = left - lastX; //设置速度
					speedY = top - lastY; //设置速度
					lastX = left; //最后的位置
					lastY = top; //最后的位置
				}
				document.onmouseup = function(){
					document.onmousemove = null;
					startMove(); //开始运动
				}
				
			}
			
			function startMove(){
				//获取box当前的坐标(被拖拽后)
				var nowX = oBox.offsetLeft;
				var nowY = oBox.offsetTop;
				clearInterval(timer);
				timer = setInterval(function(){
					speedY += 2; //加速
					nowX += speedX; //左右运动
					//判断box是否超出了可移动范围
					if(nowX > maxL){  //右边界
						speedX *= -0.8; //向反向移动，并减速
						nowX = maxL; //当前位置
					}else if(nowX < 0){ //左边界
						speedX *= -0.8; //向反向移动，并减速
						nowX = 0; //当前位置
					}
					nowY += speedY; //上下运动
					if(nowY > maxT){ //下边界
						speedY *= -0.8; //向反向移动，并减速
						speedX *= 0.8; //减速
						nowY = maxT; //当前位置
					}else if(nowY < 0){ //上边界
						speedY *= -1; //反向移动
						speedX *= 0.8; //减速
						nowY = 0; //当前位置
					}
					if(Math.abs(speedX) < 1){
						speedX = 0;
					}
					if(Math.abs(speedY) < 1){
						speedY = 0;
					}
					if(speedX == 0&& speedY == 0 && nowY == maxT){
						clearInterval(timer);
					}
					oBox.style.left = nowX + 'px';
					oBox.style.top = nowY + 'px';
				},16)
			}
		</script>

“时间不在于你拥有多少，而在于你怎样使用”