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

时间：2021-03-09 10:05:22|栏目：jquery|点击：次

核心代码：

 
$("#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

上一篇：jQuery简单动画变换效果实例分析

栏目：jquery

下一篇：jQuery实现防止提交按钮被双击的方法

本文标题：基于jQuery判断两个元素是否有重叠部分的代码

本文地址：http://www.codeinn.net/misctech/77006.html

更多jquery

jquery

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

阅读排行

推荐教程