首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
JQuery 绑定select标签的onchange事件，弹出选择的值，并实现跳转、传参
Jan 06 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
JS + HTML 罗盘式时钟的实现
May 21 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
蒙特卡罗(1) bufio(1) pdfkit(1) 结构体(1) 指针(1) vue-esign(1) map(4) Pillow(2) WeUI(1) 微信小程序(9)
You might like
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
宝塔面板在NGINX环境中TP5.1如何运行？
2021/03/09 PHP
jQuery对象[0]是什么含义？
2010/07/31 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
[03:22]DAC最前线（第二期）—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
Python中的rfind()方法使用详解
2015/05/19 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
python enumerate函数的使用方法总结
2017/11/15 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
基于python实现名片管理系统
2018/11/30 Python
代码详解django中数据库设置
2019/01/28 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
python 监控服务器是否有人远程登录（详细思路+代码）
2020/12/18 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
环保建议书600字
2014/05/14 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
团结主题班会
2015/08/13 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫