判斷元素是否有重疊部分

admin發表於2017-12-04

使用絕對定位或者浮動，可能導致多個元素重疊，實際應用中，可能需要判斷相應元素是否已經重疊。

下面通例項介紹一下如何實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>判斷元素是否有重疊部分-螞蟻部落</title>
<style type="text/css"> 
div{ 
  width:200px; 
  height:200px; 
  background:#EEE; 
  margin-top:5px;
} 
#two{ 
  position:absolute; 
  left:100px; 
  top:50px; 
  background:#F60; 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
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; 
} 
$(document).ready(function(){
  $("#result").text(isOverlap("one","two")); 
})
</script> 
</head> 
<body> 
  <div id="one">One</div> 
  <div id="two">Two</div> 
  <div id="three">Three</div> 
  <h1 id="result"></h1> 
</body> 
</html>

程式碼實現了判斷兩個元素是否有重疊部分的功能，下面介紹一下實現過程。

一.實現原理:

獲取兩個元素相對於視窗的座標值和尺寸，然後根據相關的值來判斷兩個元素在網頁中是否有重合的區域；程式碼通過判斷一個元素和另一個元素的相對位置關係，來判斷兩個元素是否有重合的部分，就一數學問題，比較難以表述，更多內容看程式碼註釋。

二.程式碼註釋:

（1）.function isOverlap(idOne,idTwo){}，宣告一個函式用於判斷兩個元素是否有重合的部分。具有兩個引數，都是物件的id值。

（2）.var objOne=$("#"+idOne)和objTwo=$("#"+idTwo)獲取指定id屬性值的jquery物件。

（3）.offsetOne=objOne.offset()，獲取objOne物件在視窗的偏移量。offset()函式返回的物件包含top和left屬性。

（4）.offsetTwo=objTwo.offset()，和上面同樣的道理。

（5）.topOne=offsetOne.top，獲取offsetOne物件相對於視窗頂部的偏移量。

（6）.topTwo=offsetTwo.top，和上面是同樣的道理。

（7）.leftOne=offsetOne.left，獲取offsetOne物件相對於視窗左部的偏移量。

（8）.leftTwo=offsetTwo.left，和上面是同樣的道理。

（9）.widthOne=objOne.width()，獲取objOne物件的寬度。

（10）.widthTwo=objTwo.width()，和上面是同樣的道理。

（11）.heightOne=objOne.height()，獲取objOne物件的高度。

（12）.heightTwo=objTwo.height()，和上面是同樣的道理。

（13）.leftTop=leftTwo>leftOne&&leftTwo<leftOne+widthOne&&topTwo>topOne&&topTwo<topOne+heightOne，當offsetTwo元素的左邊緣位於objOne元素的內部並且offsetTwo元素的上邊緣位於objOne的內部，也就是說有重合的部分，如果都滿足，leftTop的值就為true，否則為false，以下三個都是一樣的道理，大家可以自行理解一下。

（14）.return leftTop||rightTop||leftBottom||rightBottom，只要滿足任何一個，都會返回true，也就是有重合的部分。

（15）.$(document).ready(function(){}），文件結構完全載入完成再去執行函式中的程式碼。

（16）.$("#result").text(isOverlap("one","two")),呼叫函式，判斷id為one和two的元素是否有重合的部分。

三.相關閱讀:

（1）.offset()參閱jQuery offset()方法一章節。

（2）.width()參閱jQuery width()方法一章節。

（3）.height()參閱jQuery height()方法一章節。

（4）.text()參閱jQuery text()方法一章節。

相關文章