javascript判断2个对象是否重叠

  如何用javascript判断给定的2个div对象是否存在重叠部分,算法如下

1)判断4个顶点是否在另外一个对象的区域内

2)上面的判断失败,则为十字架关系,内部一部分包含在另外一个对象中,但是顶点相互不在对方内部

注意:上面2个步骤需要相互转换过参考对象

  测试源代码如下,居于jquery框架

javascript判断2个对象是否重叠

<!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个对象是否重叠

评论(0)Web开发网
阅读(673)喜欢(0)JavaScript/Ajax开发技巧