你的位置:首页 > Java教程

[Java教程]判断元素是否有重叠部分代码实例


判断元素是否有重叠部分代码实例:
大家知道使用绝对定位或者说浮动的话,就可能导致两个元素重叠,而有时候在实际应用中,则要判断两个元素是否已经重叠,下面就通过一个实例介绍一下如何实现此效果,希望对需要的朋友有所帮助。代码如下:

<!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()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8656

更多内容可以参阅:http://www.softwhy.com/jquery/