Javascript 检测Html元素是否与另一个Html元素重叠_Javascript_Jquery_Html

Javascript 检测Html元素是否与另一个Html元素重叠

javascript jquery html

Javascript 检测Html元素是否与另一个Html元素重叠,javascript,jquery,html,Javascript,Jquery,Html,在jQuery或Javascript中，我如何检测一个img标记（例如）是否与另一个img标记重叠？您可以通过查找元素的名称，然后查找每个元素的名称来实现这一点。这只是一个简单的数学问题，以确定它们是否重叠我不会为你做所有的工作，但这会让你走上正轨： <div id="one"></div> <div id="two"></div> <script> var offsetOne = $('#one').offset(); var o

在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>


var offsetOne=$（“#一”）.offset（）；
var offsetTwo=$（'#two'）.offset（）；
var widthOne=$（'#one'）.width（）；
var widthTwo=$（'#two'）.width（）；
var heightOne=$（'#one'）.height（）；
var heightTwo=$（'#two'）.height（）；

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


div{
宽度：200px；
高度：200px；
背景：#EEE；
}
#两个{
位置：绝对位置；
左：100px；
顶部：50px；
背景：#F60；
}
一个
两个
三
控制台日志（isOverlap（“一”、“二”））//真的
控制台日志（isOverlap（“一”、“三”））//假的
控制台日志（isOverlap（“两个”、“三个”）//真的
函数isOverlap（idOne，IDTOW）{
var objOne=$（“#”+idOne），
objTwo=$（“#”+idTwo），
offsetOne=objOne.offset（），
offsetwo=objTwo.offset（），
topOne=offsetOne.top，
topTwo=偏移量2.top，
leftOne=offsetOne.left，
leftTwo=偏移量2.left，
widthOne=objOne.width（），
widthTwo=objTwo.width（），
heightOne=objOne.height（），
heightTwo=对象两个高度（）；
var leftTop=leftTwo>leftOne&&leftTwotopOne和topTwoleftOne&&leftTwo+widthTwotopOne和topTwoleftOne&&leftTwotopOne和&topTwo+heightTwoleftOne&&leftTwo+widthTwotopOne和&topTwo+heightTwo

我刚刚编写了一个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>


试验
$（函数（）{
警报（doTheyOverlap（$（'div0'），$（'div1'））；
});
第0分部
第一组

我编写的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;
}

函数doTheyOverlap（div0，div1）{return（yinstertsection（div0，div1）和&xinstertsection（div0，div1））；}
函数findSalesty（第0部分，第1部分）{
返回（div0.offset（）.top0；
}
函数findsmalestx（div0，div1）{
返回（div0.offset（）.left0；
}

简单地说，我意识到“计算两个正方形是否重叠就像计算它们的线段（根据x轴和y轴）是否重叠一样简单”，在javascript中，它是这样的“

doTheyOverlap（div0，div1）{return（yinstertsection（div0，div1）&&xinstertsection（div0，div1））；}

”，从那以后，只需一对减法（

（divY0.offset（）.top+divY0.height（））-divY1.offset（）.top>0

，

（divX0.offset（）.left+divX0.width（））-divX1.offset（）.left>0

）就可以确定这些段是否重叠。

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

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;

}

功能检查重叠（el1、el2）{
var bounds1=el1.getBoundingClientRect（）；
var bounds2=el2.getBoundingClientRect（）；
var firstIstLeftmost=（bounds1.left=如果边界重叠应计数
如果（最左.右>最右.左）{
//
var firstIsTopmost=（bounds1.top=如果边界重叠应计数
返回topest.bottom>bottomest.top；
}
否则返回false；
}

@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);
}

函数doTheyOverlap（el0，el1）
{
变量elY0=（el0.offsetTop0；
var elX0=（el0.offsetLeft0；
返回（YisterSection&XisterSection）；
}

尽管从2012年开始，这个答案仍然是相关的

编辑：更新的代码

可能重复的代码有任何代码示例或文章。我从未做过这种复杂的事情。哦，好吧，我不知道你在哪里谈论实际的offset（）、width（）和height（）方法。感谢manNo问题，@MichaelGrigsby:）var one=document.getElementById（'one'））不需要JQuery@SephReed这是不对的

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);
}