判断元素是否有重叠部分

快乐打工仔 分类:实例代码

判断元素是否有重叠部分属于前端实例代码,有关更多实例代码大家可以查看

使用绝对定位或者浮动,可能导致多个元素重叠,实际应用中,可能需要判断相应元素是否已经重叠。

下面通实例介绍一下如何实现此效果。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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()方法一章节。

判断元素是否有重叠部分,这样的场景在实际项目中还是用的比较多的,关于判断元素是否有重叠部分就介绍到这了。

回复

我来回复
  • 暂无回复内容