碰撞运动与自由落体运动

最新推荐文章于 2022-10-06 17:48:23 发布

乐夫天命兮

最新推荐文章于 2022-10-06 17:48:23 发布

阅读量461

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/wangxinxin1992816/article/details/83507144

版权

JavaScript 专栏收录该内容

31 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head> 
	<title></title> 
	<meta charset='utf-8' /> 
	<style> 
	#div1
	{
		width: 100px;
	 	height: 100px;
	  	background: red;
	   	position: absolute;
	    left: 0;
     	top: 40px;
	} 
	</style>
	
</head> 
<body> 
	<input type="button" value="开始运动" onclick="startMove()"/>
	<div id="div1"></div> 
</body>
<script>
	//添加拖拽功能
	window.onload=function(){ 
		var oDiv = document.getElementById('div1');
		//当在oDiv中点击鼠标(这里会用到事件对象),则将获取X,Y鼠标当前位置-oDiv 
		//当前的left和top值,获取到鼠标离oDiv最左边/上边的距离 
		oDiv.onmousedown = function(ev){ 
			var oEvent = ev || event; 
			var disX = oEvent.clientX-oDiv.offsetLeft; 
			var disY = oEvent.clientY-oDiv.offsetTop;
		//当在文档中移动鼠标时,则将当前鼠标坐标-已处理好的disX和disY,获取到oDiv.left/top值 
		document.onmousemove = function(ev){
			var oEvent = ev || event;
			var l = oEvent.clientX-disX;
			var t = oEvent.clientY-disY;
			//oDiv的left/top值=获取到的oDiv.left/top值,则用户如何移动left/top随之改变
			oDiv.style.left = l+"px";
			oDiv.style.top = t+"px";
		};
		//当鼠标在文档松开时,则把鼠标移动/松开的方法置空. 
		document.onmouseup = function(){
			document.onmousemove = null;
			document.onmouseup = null;//在鼠标松开时调用startMove函数,实现自由弹跳
			startMove(); 
		};
		//当鼠标移动时,则关闭定时器,为了避免跟startMove函数抢定时器.
		clearInterval(timer);
		};
	};//定义X和Y轴速度;
	var speedX = 25;
	var speedY = 100;
	var timer = null;
	function startMove(){
		clearInterval(timer);
		timer = setInterval(function(){
			var oDiv = document.getElementById("div1");
			//每次Y轴+2,越弹越高 
			speedY += 5;
			//把X,Y轴速度存起来,便意使用 
			var l = oDiv.offsetLeft+speedX; 
			var t = oDiv.offsetTop+speedY;
			//当T大于了可视化区域-oDIV的高度,就使oDiv越来越慢,随之等于可视化区域-oDiv当前高度.避免了撑大可视化区域 
			if(t > document.documentElement.clientHeight - oDiv.offsetHeight) {
				//Y*-0.8 使越弹越矮;当然也要让X轴越来越小,随之T等于可视化区域-oDiv当前高度
				speedY *= -0.8;
				speedX *= 0.8;
				t = document.documentElement.clientHeight-oDiv.offsetHeight; 
			}
			//当T小余等于0时,使Y轴*=-0.8,使越弹越矮;当然也使X轴变慢,随之T=0,避免了撑大可视化区域 
			else if(t <= 0){
				speedY *= -1;
				speedX *= 0.8;
				t = 0;
			} 
			//当L大于了可视化区域-oDIV的宽度,就使oDiv越来越慢,随之等于可视化区域-oDiv当前宽度.避免了撑大可视化区域 
			if(l > document.documentElement.clientWidth-oDiv.offsetWidth) {
				//X*-0.8 使越弹越矮,随之L等于可视化区域-oDiv当前高度
				speedX *= -0.8;
				l = document.documentElement.clientWidth-oDiv.offsetWidth 
			}
			//当L小余等于0时,使X轴*=-0.8,使越弹越矮;随之L=0,避免了撑大可视化区域 
			else if(l <= 0){
				speedX *= -0.8;
				l = 0; 
			} 
			//当X和Y轴的绝对值小余1时,则X和Y轴=0; 避免负小数点出现误差
			if(Math.abs(speedX) < 1){
				speedX = 0; 
			}
			if(Math.abs(speedY) < 1){
				speedY = 0; 
			} 
			//停止条件:当X,Y轴速度都为0时,并且t=可视化高度-oDiv.offsetHeight,则关闭定时器
			if(speedX == 0 && speedY == 0 && t == document.documentElement.clientHeight-oDiv.offsetHeight){
				clearInterval(timer); 
			}else{ 
				//添加oDIV速度 
				oDiv.style.left = l+"px"; 
				oDiv.style.top = t+"px";
			} 
			document.title = speedX; 
		},30)
	}
</script> 
</html>

乐夫天命兮

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
碰撞运动与自由落体运动

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset='utf-8' /&gt; &lt;style&gt; #div1 { width: 100px; height: 100px; background: red; po
复制链接

扫一扫

专栏目录