基于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
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