javascript判断2个对象是否重叠
如何用javascript判断给定的2个div对象是否存在重叠部分,算法如下
1)判断4个顶点是否在另外一个对象的区域内
2)上面的判断失败,则为十字架关系,内部一部分包含在另外一个对象中,但是顶点相互不在对方内部
注意:上面2个步骤需要相互转换过参考对象
测试源代码如下,居于jquery框架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <title>判断2个对象是否重叠</title> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script> <script> function isOver(o1, o2) { o1 = $(o1); o2 = $(o2); var p1 = o1.offset(), p2 = o2.offset(); p1.right = p1.left + o1.width(); p1.bottom = p1.top + o1.height(); p2.right = p2.left + o2.width(); p2.bottom = p2.top + o2.height(); //判断4个顶点是否在另外一个对象的区域内 var rst = //o2作为参考对象 ((p1.left >= p2.left && p1.left <= p2.right && p1.top >= p2.top && p1.top <= p2.bottom)) || //左上角 ((p1.right >= p2.left && p1.right <= p2.right && p1.top >= p2.top && p1.top <= p2.bottom)) || //右上角 ((p1.left >= p2.left && p1.left <= p2.right && p1.bottom >= p2.top && p1.bottom <= p2.bottom)) || //左下角 ((p1.right >= p2.left && p1.right <= p2.right && p1.bottom >= p2.top && p1.bottom <= p2.bottom)) || //右下角 //o1作为参考对象 ((p2.left >= p1.left && p2.left <= p1.right && p2.top >= p1.top && p2.top <= p1.bottom)) || //左上角 ((p2.right >= p1.left && p2.right <= p1.right && p2.top >= p1.top && p2.top <= p1.bottom)) || //右上角 ((p2.left >= p1.left && p2.left <= p1.right && p2.bottom >= p1.top && p2.bottom <= p1.bottom)) || //左下角 ((p2.right >= p1.left && p2.right <= p1.right && p2.bottom >= p1.top && p2.bottom <= p1.bottom)) //右下角 ; //上面的判断失败,则为十字架关系,内部一部分包含在另外一个对象中,但是顶点相互不在对方内部 if (!rst) rst = //o2作为参考 (p1.left < p2.left && p1.right > p2.right && p1.top > p2.top && p1.bottom < p2.bottom) || //o1水平横穿o2 (p1.left > p2.left && p1.right < p2.right && p1.top < p2.top && p1.bottom > p2.bottom) || //o1垂直横穿o2 //o1作为参考 (p2.left < p1.left && p2.right > p1.right && p2.top > p1.top && p2.bottom < p1.bottom) || //o2水平横穿o1 (p2.left > p1.left && p2.right < p1.right && p2.top < p1.top && p2.bottom > p1.bottom)//o2垂直横穿o1 ; return rst; } function checkOverlay() { var dvFixed = $('#dvFixed'), div1 = $('#div1'), div2 = $('#div2'), div3 = $('#div3'), rst = ''; rst += 'dvFixed和div1' + (isOver(dvFixed, div1) ? '<b>有重叠</b>' : '无重叠'); rst += ',dvFixed和div2' + (isOver(dvFixed, div2) ? '<b>有重叠</b>' : '无重叠'); rst += ',dvFixed和div3' + (isOver(dvFixed, div3) ? '<b>有重叠</b>' : '无重叠'); dvFixed.find('div').html(rst); } window.onload = function () { $(window).scroll(checkOverlay).trigger('scroll'); }; </script> <style> div{width:100px;height:100px;border:solid 1px #000} #dvFixed{position:fixed;background:#ccc;width:300px;height:50px;top:0px;left:0px;color:Red}/*水平横穿*/ #dvFixed.vertical{width:50px;height:300px;top:0px;left:70px;}/*垂直横穿样式*/ #dvFixed b{color:red} #dvFixed div{font-size:12px;color:green} div.auto{width:auto;height:auto;border:none} </style> <!--测试垂直横穿增加 class="vertical"样式,其他顶点包含在内修改#dvFixed的样式--> <div id="dvFixed">divFixed<div class="auto"></div></div> <div style="height:2000px;margin-left:50px;margin-top:100px" class="auto"> <div class="div" id="div1">div1</div> <div class="div" id="div2">div2</div> <div class="div" id="div3">div3</div></div>
加支付宝好友偷能量挖...
原创文章,转载请注明出处:javascript判断2个对象是否重叠