前端之盒子类重力感应拖拽效果

最新推荐文章于 2023-05-17 14:10:14 发布

xidianyueyong

最新推荐文章于 2023-05-17 14:10:14 发布

阅读量839

点赞数

分类专栏： html5 js小部件，前端文章标签：盒子类重力感应拖拽效果前端

本文链接：https://blog.csdn.net/xidianyueyong/article/details/76851257

版权

html5 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

js小部件，前端

6 篇文章 0 订阅

订阅专栏

盒子类重力感应拖拽效果:

拖拽盒子,放开后盒子会类似皮球一样带重力并有碰撞运动

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1
{
	width:100px;
	height:100px;
	background-color:#F00;
	position:absolute;
	left:0;
	top:0;
}
#but1
{
	position:absolute;
	top:100px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.οnlοad=function()
{
	var oDiv=document.getElementById("div1");
	lastX=l=document.documentElement.clientWidth/2-oDiv.offsetWidth;
	lastY=document.documentElement.clientHeight/2-oDiv.offsetHeight;             
	oDiv.style.left=lastX+'px';
	oDiv.style.top=lastY+'px';	                             //让初始值在页面中间
	
	//为盒子鼠标加事件
	oDiv.οnmοusedοwn=function(ev)       //鼠标按下事件                
	{
		clearInterval(timer);
			var oEvent=ev||event;
			var disX=oEvent.clientX-oDiv.offsetLeft;
			var disY=oEvent.clientY-oDiv.offsetTop;
			document.οnmοusemοve=function(ev)    //鼠标移动事件
			{
				var oEvent=ev||event;
				var l=oEvent.clientX-disX;
				var t=oEvent.clientY-disY;
				oDiv.style.left=l+'px';
				oDiv.style.top=t+'px';	
				iSpeedX=l-lastX;
				iSpeedY=t-lastY;
				lastX=l;
				lastY=t;
			}; 
			document.οnmοuseup=function()           //鼠标抬起事件
			{
				document.οnmοusemοve=null;
				document.οnmοuseup=null;
				starMove();
				
			};
	};	
};
//重力运动事件
var iSpeedX=12;
var iSpeedY=0;
var timer=null;
	function starMove()
	{
		clearInterval(timer);
		var oDiv=document.getElementById("div1");
		timer=setInterval(function(){
			var l=oDiv.offsetLeft+iSpeedX;
			var t=oDiv.offsetTop+iSpeedY;		
			if(t>(document.documentElement.clientHeight-oDiv.offsetHeight))
			{
				t=document.documentElement.clientHeight-oDiv.offsetHeight;               //保证不走出页面
				iSpeedY*=-0.8;
				iSpeedX*=0.8;                                                             //碰撞后改变方向并有碰撞损失
			}
			if(l>(document.documentElement.clientWidth-oDiv.offsetWidth))
			{
				l=document.documentElement.clientWidth-oDiv.offsetWidth;
				iSpeedX*=-0.8;
			}
			if(t<0)
			{
				t=0;
				iSpeedY*=-0.8;
				iSpeedX*=0.8;
			}
			if(l<0)
			{
				l=0;
				iSpeedX*=-0.8;
			}
			else
			{
				iSpeedY+=3;
			}
			if(Math.abs(iSpeedX)<0.5)
			{
				iSpeedX=0;
			}
			if(Math.abs(iSpeedY)<0.5)
			{
				iSpeedY=0;
			}
			if(iSpeedX==0&&iSpeedY==0&&t==(document.documentElement.clientHeight-oDiv.offsetHeight))   //停止条件（x和y方向速度 都为0，并且到达页面框的最下边）
			{
				clearInterval(timer);
			}
			else
			{
				oDiv.style.left=l+'px';
				oDiv.style.top=t+'px';	
			}
		},30);
	}
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>