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

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

原理很简单，就是判断一个元素的四个点是否在另一个元素内部，需要的朋友可以参考下

核心代码：

复制代码 代码如下:

$("#result").text(isOverlap("one","two")+","+isOverlap("one","three")+","+isOverlap("two","three"));

function isOverlap(idOne,idTwo){

var objOne=$("#"+idOne),

objTwo=$("#"+idTwo),

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,

复制代码 代码如下:

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,

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;