36、JavaScript中两个DIV的碰撞检测

男娘i 2022-09-21 13:04 140阅读 0赞

1、碰撞检测的原理

![20160620143054875][]

2、碰撞检测的代码

<!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:red; position:absolute; z-index:2;}
    #div2 {width:100px; height:100px; background:yellow; position:absolute; left:230px; top:220px; z-index:1;}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
    window.οnlοad=function ()
    {
    	var oDiv=document.getElementById('div1');
    	var oDiv2=document.getElementById('div2');
    	
    	oDiv.οnmοusedοwn=function (ev)
    	{
    		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;
    			
    			oDiv.style.left=oEvent.clientX-disX+'px';
    			oDiv.style.top=oEvent.clientY-disY+'px';
    			
    			var l1=oDiv.offsetLeft;
    			var r1=oDiv.offsetLeft+oDiv.offsetWidth;
    			var t1=oDiv.offsetTop;
    			var b1=oDiv.offsetTop+oDiv.offsetHeight;
    			
    			var l2=oDiv2.offsetLeft;
    			var r2=oDiv2.offsetLeft+oDiv2.offsetWidth;
    			var t2=oDiv2.offsetTop;
    			var b2=oDiv2.offsetTop+oDiv2.offsetHeight;
    			
    			if(r1<l2 || l1>r2 || b1<t2 || t1>b2)
    			{
    				oDiv2.style.background='yellow';
    			}
    			else
    			{
    				oDiv2.style.background='green';
    			}
    		};
    		
    		document.οnmοuseup=function ()
    		{
    			document.οnmοusemοve=null;
    			document.οnmοuseup=null;
    		};
    	};
    };
    </script>
    </head>
    
    <body>
    <div id="div1"></div>
    <div id="div2"></div>
    </body>
    </html>

[20160620143054875]: /images/20220721/64b19ac4392b4cfb9c5347d4ad495e69.png