[英]Detecting if Html element is overlapping another Html element
在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>
剩下的就是使用兩個偏移量的.top＆.left以及寬度和高度來確定是否存在重疊。 查看我的答案第一段中每個功能的文檔鏈接。
我剛寫了一個js文件供你使用=）希望它可以幫助你......我花了一段時間才完成它
您可以從以下鏈接下載： solid-dotheyoverlap.js
只需包含那個js文件並調用doTheyOverlap函數和你想知道它們是否重疊的兩個div，就是這樣！
這是我為你做的一個基本而簡單的例子：
<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;
}
用簡單的話來說，我意識到“弄清楚2個方格是否重疊就像弄清楚它們的分段（根據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年開始，這個答案仍然具有相關性
編輯：更新的代碼
使用jQuery檢測在另一個HTML元素上移動的HTML元素
[英]Detecting a html element moving over another html element using jquery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.