如何检测两个<div>元素是否发生冲突?
<div>
这两个div是简单的彩色框,彼此垂直,因此没有复杂的形状或角度。
var overlaps = (function () { function getPositions( elem ) { var pos, width, height; pos = $( elem ).position(); width = $( elem ).width(); height = $( elem ).height(); return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ]; } function comparePositions( p1, p2 ) { var r1, r2; r1 = p1[0] < p2[0] ? p1 : p2; r2 = p1[0] < p2[0] ? p2 : p1; return r1[1] > r2[0] || r1[0] === r2[0]; } return function ( a, b ) { var pos1 = getPositions( a ), pos2 = getPositions( b ); return comparePositions( pos1[0], pos2[0] ) && comparePositions( pos1[1], pos2[1] ); }; })(); $(function () { var area = $( '#area' )[0], box = $( '#box0' )[0], html; html = $( area ).children().not( box ).map( function ( i ) { return '<p>Red box + Box ' + ( i + 1 ) + ' = ' + overlaps( box, this ) + '</p>'; }).get().join( '' ); $( 'body' ).append( html ); }); body { padding: 30px; color: #444; font-family: Arial, sans-serif; } h1 { font-size: 24px; margin-bottom: 20px; } #area { border: 2px solid gray; width: 500px; height: 400px; position: relative; } #area > div { background-color: rgba(122, 122, 122, 0.3); position: absolute; text-align: center; font-size: 50px; width: 60px; height: 60px; } #box0 { background-color: rgba(255, 0, 0, 0.5) !important; top: 150px; left: 150px; } #box1 { top: 260px; left: 50px; } #box2 { top: 110px; left: 160px; } #box3 { top: 200px; left: 200px; } #box4 { top: 50px; left: 400px; } p { margin: 5px 0; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <h1>Detect overlapping with JavaScript</h1> <div id="area"> <div id="box0"></div> <div id="box1">1</div> <div id="box2">2</div> <div id="box3">3</div> <div id="box4">4</div> </div>
一般思路-获得框的偏移量和尺寸,并检查它们是否重叠。
如果要更新,可以使用setInterval:
setInterval
function detectOverlapping() { // code that detects if the box overlaps with a moving box setInterval(detectOverlapping, 25); } detectOverlapping();
另外,请注意,您可以针对特定示例优化功能。
因为它们是固定的,所以您不必重复读取框的尺寸(就像我在代码中一样)。您可以在页面加载时读取它们(将其读取到变量中),然后仅读取变量
小盒子的水平位置不会改变(除非用户调整窗口大小)。轿厢的垂直位置不变。因此,这些值也不必重复读取,也可以存储到变量中。
您无需测试小盒子是否始终与所有汽车盒子重叠。您可以-基于其垂直位置-确定当前箱子在哪个车道上,并仅从该车道测试特定的汽车箱子。