拖拽+碰撞+重力加速度

最新推荐文章于 2022-09-01 17:16:58 发布

编程之上

最新推荐文章于 2022-09-01 17:16:58 发布

阅读量2.1k

点赞数 3

分类专栏： javascript

本文链接：https://blog.csdn.net/ruizhengyun/article/details/38026793

版权

javascript 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

鼠标在标题处按下，然后拖动，放下的那一刻执行碰撞+重力加速度事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>拖拽+碰撞+重力加速度</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css" media="screen">
	*{margin:0; padding: 0;}
	li{list-style: none;}
	a{text-decoration: none; color:#333;}
	a:hover{color:green;}
	#box{position: absolute; top:100px; left:35%; background-color:#fff; width:400px; border:1px solid #ccc; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; border-radius:4px;}
	#box h2{ height: 34px; line-height:34px; padding:2px 10px; font-size:14px; color:#666; background-color: #f8f8f8; border-bottom:1px solid #ccc; -webkit-border-radius:4px 4px 0 0; -moz-border-radius:4px 4px 0 0; -o-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0; cursor:move;}
	#box .cont{padding: 10px;}
	#box .cont li{ line-height: 24px; margin-bottom: 3px;}
</style>
</head>
<body>
<script>

window.onload = function(){
	var oDiv  = document.getElementById('box');
	var oH = oDiv.getElementsByTagName('h2')[0];
	var lastX = 0;
	var lastY = 0;
	oH.onmousedown = function(e){
		var e = e||event;

		// 鼠标与物体左侧和上侧的距离
		var disX = e.clientX - oDiv.offsetLeft; 
		var disY = e.clientY - oDiv.offsetTop;

		document.onmousemove = function(e){
			var e = e||event;
			var l = e.clientX - disX;
			var t = e.clientY - disY;
				
			if(l <= 0){
				l = 0;
			}else if(l > document.documentElement.clientWidth - oDiv.offsetWidth){
				l=document.documentElement.clientWidth - oDiv.offsetWidth;
			}

			if(t<=0){
				t=0;
			}else if(t > document.documentElement.clientHeight - oDiv.offsetHeight){
				t = document.documentElement.clientHeight - oDiv.offsetHeight;
			}

			oDiv.style.left = l + 'px';
			oDiv.style.top = t + 'px';

			// 瞬间上次
			iSpeedX = l - lastX;
			iSpeedY = t - lastY;
			lastX = l;
			lastY = t;
		}

		document.onmouseup = function(){
			document.onmousemove = null;
			document.onmouseup = null;	
			startmove(oDiv);
		}

		clearInterval(timer);
	}
}

// 速度
var iSpeedX = 0;
var iSpeedY = 0;
var timer = null;
function startmove(obj){
	clearInterval(timer);
	timer = setInterval(function(){
		// 重力加速度
		iSpeedY +=3;
		var l = obj.offsetLeft + iSpeedX;
		var t = obj.offsetTop + iSpeedY;

		if(t>=document.documentElement.clientHeight - obj.offsetHeight){
			iSpeedY *= - 0.8;
			iSpeedX *= 0.8;
			t=document.documentElement.clientHeight - obj.offsetHeight;
		}else if(t<=0){
			iSpeedY *= -0.8;
			iSpeedX *= 0.8;
			t = 0;
		}
		if(l>=document.documentElement.clientWidth - obj.offsetWidth){
			iSpeedX *= -0.8;
			l=document.documentElement.clientWidth - obj.offsetWidth;
		}else if(l<=0){
			iSpeedX *= -0.8;
			l = 0;
		}
		// 解决小数问题
		if(Math.abs(iSpeedX)<1){
			iSpeedX=0;
		}
		if(Math.abs(iSpeedY)<1){
			iSpeedY=0;
		}

		if(iSpeedY==0 && iSpeedX==0 && t==document.documentElement.clientHeight-obj.offsetHeight){
			clearInterval(timer);
		}

		obj.style.top = t + 'px';
		obj.style.left = l + 'px';
	},30);
}
</script>
    <div id="box">
    	<h2>浏览</h2>
    	<div class="cont">
    		<ul>
    			<li><a href="http://www.ruizhengyun.cn/" title="" target="_blank">网站简介</a></li>
    			<li><a href="http://www.ruizhengyun.cn/" title="" target="_blank">网站简介</a></li>
    			<li><a href="http://www.ruizhengyun.cn/" title="" target="_blank">网站简介</a></li>
    			<li><a href="http://www.ruizhengyun.cn/" title="" target="_blank">网站简介</a></li>
    			<li><a href="http://www.ruizhengyun.cn/" title="" target="_blank">网站简介</a></li>
    			<li><a href="http://www.ruizhengyun.cn/" title="" target="_blank">网站简介</a></li>
    		</ul>
    	</div>
    </div>
</body>
</html>