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

简介:

 这是博问中的一个问题: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/,如需转载请自行联系原作者

相关文章
|
7月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
|
7月前
|
前端开发 JavaScript
如何利用jQuery来向一个元素中添加和移除CSS类?
如何利用jQuery来向一个元素中添加和移除CSS类?
98 0
|
2月前
|
JavaScript
jQuery - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
47 10
|
3月前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
25 2
|
3月前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
30 6
|
4月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
42 2
|
4月前
|
前端开发 JavaScript
jQuery改变元素的方法
jQuery改变元素的方法
29 1
|
4月前
|
JavaScript Java
分别使用java script和jQuery添加页面元素
分别使用java script和jQuery添加页面元素
36 0
|
4月前
|
JavaScript
JQuery——动态添加元素导致点击事件失效
JQuery——动态添加元素导致点击事件失效
45 0
|
6月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作