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

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

php中文网

发布： 2016-05-16 17:51:41

原创

1350人浏览过

核心代码：

知识画家

AI交互知识生成引擎，一句话生成知识视频、动画和应用

查看详情

复制代码代码如下:

 
$("#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 && topTwo > topOne && topTwo rightTop = leftTwo+widthTwo > leftOne && leftTwo+widthTwo && topTwo > topOne && topTwo leftBottom = leftTwo > leftOne && leftTwo && topTwo+heightTwo > topOne && topTwo+heightTwo rightBottom = leftTwo+widthTwo > leftOne && leftTwo+widthTwo && topTwo+heightTwo > topOne && topTwo+heightTwo 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 && topTwo > topOne && topTwo rightTop = leftTwo+widthTwo > leftOne && leftTwo+widthTwo && topTwo > topOne && topTwo leftBottom = leftTwo > leftOne && leftTwo && topTwo+heightTwo > topOne && topTwo+heightTwo rightBottom = leftTwo+widthTwo > leftOne && leftTwo+widthTwo && topTwo+heightTwo > topOne && topTwo+heightTwo return leftTop || rightTop || leftBottom || rightBottom; 
} 
One

Two

Three


div{ 
width:200px; 
height:200px; 
background:#EEE; 
} 
#two{ 
position:absolute; 
left:100px; 
top:50px; 
background:#F60; 
} 
DownLoad 




JSCode demo




One

Two

Three





Share link 
Embed on your page 
Share on Sina 
Share on QQ 