正在检测Html元素是否与另一个Html元件重叠

Detecting if Html element is overlapping another Html element

本文关键字：Html 另一个 重叠 是否 检测 元素      更新时间：2024-02-29

在jQuery或Javascript中，如何检测img标记是否与另一个img标记重叠？

您可以通过查找元素的偏移量，然后查找元素的宽度&每个的高度。这只是一个简单的数学问题来确定它们是否重叠。

我不会为你做所有的工作，但这应该会让你走上正轨：

<div id="one"></div>
<div id="two"></div>
<script>
var offsetOne = $('#one').offset();
var offsetTwo = $('#two').offset();
var widthOne = $('#one').width();
var widthTwo = $('#two').width();
var heightOne = $('#one').height();
var heightTwo = $('#two').height();
</script>

剩下的就是使用两个偏移量。以及宽度和高度，以确定是否存在重叠。查看我答案第一段中每个函数中的文档链接。

我刚刚写了一个js文件供您使用=）希望它能帮助您。。。我花了一段时间才完成

你可以从这个链接下载：solid-dotheyoverlap.js

只需包含该js文件，并使用您想知道它们是否重叠的两个div调用doTheyOverlap函数，就可以了！

这是我为你做的一个基本而简单的例子：

<html>
<head>
<title>Test</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="solid-dotheyoverlap.js"></script>
<script type="text/javascript">
    $(function() {  
        alert(doTheyOverlap($('#div0'),$('#div1')));    
    });
</script>
</head>
<body>
    <div id="div0" style="position: absolute; width : 200px; height : 200px; background-color : red">div 0</div>
    <div id="div1" style="position: absolute; width : 200px; height : 200px; background-color : yellow; top:100px; left:100px">div 1</div>
</body>
</html>

我编写的solid-doTheyOverlap.js的代码比@artwl提出的解决方案更清晰、更高效。它是这样的：

function doTheyOverlap(div0, div1){return (yInstersection(div0, div1) && xInstersection(div0, div1));}
function findSmallestY(div0, div1){
    return (div0.offset().top < div1.offset().top)? div0 : div1;
}
function yInstersection(div0, div1){
    var divY0 = findSmallestY(div0, div1);
    var divY1 = (div0 != divY0)? div0 : div1;
    return (divY0.offset().top + divY0.height()) - divY1.offset().top > 0;
}
function findSmallestX(div0, div1){
    return (div0.offset().left < div1.offset().left)? div0 : div1;
}
function xInstersection(div0, div1){
    var divX0 = findSmallestX(div0, div1);
    var divX1 = (div0 != divX0)? div0 : div1;
    return (divX0.offset().left + divX0.width()) - divX1.offset().left > 0;
}

简单地说，我意识到"弄清楚两个正方形是否重叠，就像弄清楚它们的线段（指向x轴和y轴）是否重叠一样简单"，在javascript中，它就像这样的"doTheyOverlap(div0, div1){return (yInstersection(div0, div1) && xInstersection(div0, div1));}"，从那时起，它就像一对子运算（(divY0.offset().top + divY0.height()) - divY1.offset().top > 0，(divX0.offset().left + divX0.width()) - divX1.offset().left > 0）一样简单，可以找出这些线段是否重叠。

使用getBoundingClientRect（）的另一种普通方法。我分享这个是因为我不喜欢这里的答案，这是我的解决方案。

function checkForOverlap(el1, el2) {
    var bounds1 = el1.getBoundingClientRect();
    var bounds2 = el2.getBoundingClientRect();
    var firstIstLeftmost = (bounds1.left <= bounds2.left);
    var leftest = firstIstLeftmost ? bounds1 : bounds2;
    var rightest = firstIstLeftmost ? bounds2 : bounds1;
    //change to >= if border overlap should count
    if(leftest.right > rightest.left) {
            //
        var firstIsTopmost = (bounds1.top <= bounds2.top);
        var topest = firstIsTopmost ? bounds1 : bounds2;
        var bottomest = firstIsTopmost ? bounds2 : bounds1;
        //change to >= if border overlap should count
        return topest.bottom > bottomest.top;
    }
    else return false;
}

演示

<style type="text/css">
    div{
        width:200px;
        height:200px;
        background:#EEE;
    }
    #two{
        position:absolute;
        left:100px;
        top:50px;
        background:#F60;
    }
</style>
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<script>
    console.log(isOverlap("one","two"));//true
    console.log(isOverlap("one","three"));//false
    console.log(isOverlap("two","three"));//true
    function isOverlap(idOne,idTwo){
        var objOne=$("#"+idOne),
            objTwo=$("#"+idTwo),
            offsetOne = objOne.offset(),
            offsetTwo = objTwo.offset(),
            topOne=offsetOne.top,
            topTwo=offsetTwo.top,
            leftOne=offsetOne.left,
            leftTwo=offsetTwo.left,
            widthOne = objOne.width(),
            widthTwo = objTwo.width(),
            heightOne = objOne.height(),
            heightTwo = objTwo.height();
        var leftTop = leftTwo > leftOne && leftTwo < leftOne+widthOne 
                && topTwo > topOne && topTwo < topOne+heightOne,
            rightTop = leftTwo+widthTwo > leftOne && leftTwo+widthTwo < leftOne+widthOne 
                && topTwo > topOne && topTwo < topOne+heightOne,
            leftBottom = leftTwo > leftOne && leftTwo < leftOne+widthOne 
                && topTwo+heightTwo > topOne && topTwo+heightTwo < topOne+heightOne,
            rightBottom = leftTwo+widthTwo > leftOne && leftTwo+widthTwo < leftOne+widthOne 
                && topTwo+heightTwo > topOne && topTwo+heightTwo < topOne+heightOne;
        return leftTop || rightTop || leftBottom || rightBottom;
    }
</script>

@solid-snake，我将您的代码改写为更简洁的形式：

function doTheyOverlap(el0, el1)
{
    var elY0 = (el0.offsetTop < el1.offsetTop)? el0 : el1;
    var elY1 = (el0 != elY0)? el0 : el1;
    var yInstersection = (elY0.offsetTop + elY0.clientHeight) - elY1.offsetTop > 0;
    var elX0 = (el0.offsetLeft < el1.offsetLeft)? el0 : el1;
    var elX1 = (el0 != elX0)? el0 : el1;
    var xInstersection = (elX0.offsetLeft + elX0.clientWidth) - elX1.offsetLeft > 0;
    return (yInstersection && xInstersection);
}

尽管这个答案来自2012年，但仍然具有相关性

编辑：更新代码

相关文章：