编程 Javascript

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

Posted in Javascript onJuly 25, 2012

核心代码：

$("#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判断两个元素是否有重叠部分的代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

关于图片验证码设计的思考

Jan 29 Javascript

经典海量jQuery插件大家可以收藏一下

Feb 07 Javascript

浅析javascript闭包实例分析

Dec 25 Javascript

你需要知道的10个最佳javascript开发实践小结

Apr 15 Javascript

Firefox下无法正常显示年份的解决方法

Sep 04 Javascript

基于javascript实现彩票随机数生成（简单版）

Apr 17 Javascript

jQuery遍历DOM元素与节点方法详解

Apr 14 Javascript

Vue ElementUI之Form表单验证遇到的问题

Aug 21 Javascript

Vue实现的父组件向子组件传值功能示例

Jan 19 Javascript

浅谈发布订阅模式与观察者模式

Apr 09 Javascript

antd日期选择器禁止选择当天之前的时间操作

Oct 29 Javascript

原生JS运动实现轮播图

Jan 02 Javascript

JavaScript中的apply()方法和call()方法使用介绍

Jul 25 #Javascript

关于JavaScript中原型继承中的一点思考

Jul 25 #Javascript

原生js 秒表实现代码

Jul 24 #Javascript

javascript设计模式接口介绍

Jul 24 #Javascript

javascript设计模式封装和信息隐藏（上）

Jul 24 #Javascript

js+xml生成级联下拉框代码

Jul 24 #Javascript

40个新鲜出炉的jQuery 插件和免费教程[上]

Jul 24 #Javascript

You might like

php Memcache 中实现消息队列

2009/11/24 PHP

php cli 小技巧

2013/06/03 PHP

php读取文件内容的三种可行方法示例介绍

2014/02/08 PHP

php冒泡排序与快速排序实例详解

2015/12/07 PHP

Yii2框架引用bootstrap中日期插件yii2-date-picker的方法

2016/01/09 PHP

详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)

2017/04/07 PHP

yii2中LinkPager增加总页数和总记录数的实例

2017/08/28 PHP

Yii框架视图、视图布局、视图数据块操作示例

2019/10/14 PHP

javascript 兼容鼠标滚轮事件

2009/04/07 Javascript

cnblogs TagCloud基于jquery的实现代码

2010/06/11 Javascript

Javascript匿名函数的一种应用代码封装

2010/06/27 Javascript

JQuery对checkbox操作（循环获取）

2011/05/20 Javascript

Javascript对象属性方法汇总

2013/11/21 Javascript

JavaScript导出Excel实例详解

2014/11/25 Javascript

jQuery自定义数值抽奖活动代码

2016/06/11 Javascript

基于javascript实现按圆形排列DIV元素(三)

2016/12/02 Javascript

jQuery删除当前节点元素

2016/12/07 Javascript

原生JS实现垂直手风琴效果

2017/02/19 Javascript

JS实现含有中文字符串的友好截取功能分析

2017/03/13 Javascript

Vue.js做select下拉列表的实例(ul-li标签仿select标签)

2018/03/02 Javascript

微信小程序网络请求实现过程解析

2019/11/06 Javascript

JavaScript Window浏览器对象模型原理解析

2020/05/30 Javascript

利用webpack理解CommonJS和ES Modules的差异区别

2020/06/16 Javascript

vue实现表格合并功能

2020/12/01 Vue.js

[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski

2018/08/10 DOTA

跟老齐学Python之传说中的函数编写条规

2014/10/11 Python

Python实现求笛卡尔乘积的方法

2017/09/16 Python

Pandas标记删除重复记录的方法

2018/04/08 Python

利用Python绘制Jazz网络图的例子

2019/11/21 Python

python exit出错原因整理

2020/08/31 Python

全球领先的中国制造商品在线批发平台：DHgate

2020/01/28 全球购物

董事长岗位职责

2013/11/30 职场文书

我爱祖国演讲稿

2014/09/02 职场文书

英文道歉信

2015/01/20 职场文书

公司开业的祝贺语大全（60条）

2019/07/05 职场文书

pandas中DataFrame检测重复值的实现

2021/05/26 Python