且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

用jQuery判断两个元素是否有重叠部分

更新时间:2022-09-08 15:09:54

 这是博问中的一个问题:http://q.cnblogs.com/q/39172/

  我的方案如下:

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;
}

  原理很简单,就是判断一个元素的四个点是否在另一个元素内部。

  Demo:

  如果有其他方案欢迎提出。



本文转自Artwl博客园博客,原文链接:http://www.cnblogs.com/artwl/,如需转载请自行联系原作者