好的。我已经检查了所有重叠情况,并创建了这个fiddle。我使用了getBoundintClientRect()
来获取要检查重叠的两个div
的top
、left
、bottom
、right
值,然后使用各种条件语句和条件进行比较,具体内容可以在下面找到。在这个fiddle中,你的四个元素都有position: absolute
,调整它们的top
和left
值使它们彼此重叠,并检查两个元素是否重叠?将这两个元素传递给函数-
checkElements(elA, elB); // pass two elements to check
这是在最后。
您将在fiddle中看到长的if
else
条件,它们仅用于测试所有重叠可能性。这里是用于检查重叠的所有可能条件 -
if((eleB.top >= eleA.top && eleB.top <= eleA.bottom) || (eleB.bottom >= eleA.top && eleB.bottom <= eleA.bottom)) {
if((eleB.left >= eleA.left && eleB.left <= eleA.right) || (eleB.right >= eleA.left && eleB.right <= eleA.right)) {
el1.innerHTML = '<p>covered</p>';
}
else {
el1.innerHTML = '<p>not covered</p>';
}
}
else {
el1.innerHTML = '<p>not covered</p>';
}
如果 B 重叠 A ,那么它将写入 A 被覆盖,因为我使用了 A 和 B 的 x 和 y 坐标进行比较。 在这种情况下,我认为需要使用一个额外的条件检查 z-index
。我没有为此创建。
请检查 fiddle,调整不同元素的 top
和 left
值,然后将两个元素传递给函数 checkElements()
,看看结果是否正确。
您也可以同时进行所有检查,如下所示 -
checkElements(elA, elB); // check if A is overlapped by B
checkElements(elB, elC); // check if B is overlapped by C
checkElements(elC, elD); // check if C is overlapped by D
查看使用多重检查的fiddle。
编辑:如果循环是问题,那么您可以将所有if
else
的循环合并成一个单独的if
else
,如下所示-
if(((eleB.top >= eleA.top && eleB.top <= eleA.bottom) || (eleB.bottom >= eleA.top && eleB.bottom <= eleA.bottom)) && ((eleB.left >= eleA.left && eleB.left <= eleA.right) || (eleB.right >= eleA.left && eleB.right <= eleA.right))) {
el1.innerHTML = '<p>covered</p>'; // or your code of adding true to the attribute that tells about overlapping
}
else {
el1.innerHTML = '<p>not covered</p>';
}
更新的fiddle
var coverLeft = $(".cover").offset().left; if (coverLeft >= $(".ele3").offset().left && coverLeft <= $(".ele3").offset().left + $(".ele3").width()) { console.log("element C is (horizontal)covered") }
- Sherali Turdiyev