首页
所有分类
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 Ajax异步处理Json数据.
Sep 09 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
详解 TypeScript 枚举类型
Nov 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
爬虫(2) LOGO(1) MIME(1) most_common(1) 抖音(1) Counter(1) redo log(1) 写入策略(1) Xpath(1) binlog(2)
You might like
php tp验证表单与自动填充函数代码
2012/02/22 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
js面向对象编程总结
2017/02/16 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
详解React Native 屏幕适配（炒鸡简单的方法）
2018/06/11 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
Python简单日志处理类分享
2015/02/14 Python
python实现在windows服务中新建进程的方法
2015/06/30 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
详解Django之auth模块（用户认证）
2018/04/17 Python
pytorch 数据集图片显示方法
2018/07/26 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
英国最大的宠物食品和宠物用品网上零售商： Zooplus
2016/08/01 全球购物
EJB与JAVA BEAN的区别
2016/08/29 面试题
给校长的建议书
2014/03/12 职场文书
《赶海》教学反思
2014/04/20 职场文书
关于环保的建议书
2014/05/12 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
社区党支部承诺书
2015/04/29 职场文书
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js