基于jQuery判断两个元素是否有重叠部分的代码

时间：2021-05-25

核心代码：
复制代码 代码如下:
$("#result").text(isOverlap("one","two")+","+isOverlap("one","three")+","+isOverlap("two","three"));
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;
}

原理很简单，就是判断一个元素的四个点是否在另一个元素内部。
完整演示代码：
复制代码 代码如下:
JSCode
LoginResult JavaScript HTML CSS ALL Edit Share
$("#result").text(isOverlap("one","two")+","+isOverlap("one","three")+","+isOverlap("two","three"));
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;
}
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<h1 id="result"></h1>
div{
width:200px;
height:200px;
background:#EEE;
}
#two{
position:absolute;
left:100px;
top:50px;
background:#F60;
}
DownLoad
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>JSCode demo</title>
<style type="text/css">
div{
width:200px;
height:200px;
background:#EEE;
}
#two{
position:absolute;
left:100px;
top:50px;
background:#F60;
}
</style>
<script src="/js_lib/jQuery-1.7.2.js" type="text/javascript"></script>
</head>
<body>
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<h1 id="result"></h1>
<script type="text/javascript">
$("#result").text(isOverlap("one","two")+","+isOverlap("one","three")+","+isOverlap("two","three"));
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>
</body>
</html>
Share link
Embed on your page
Share on Sina
Share on QQ

作者：Artwl

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章