首页
所有分类
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 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
Bootstrap 附加导航（Affix）插件实例详解
Jun 01 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 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
ad hoc(1) 立体声(1) 中波(3) 电台频率(32) 收音机(62) 长波(3) GWEN(1) Harman Kardon(1) 调频(4) KDKA(1)
You might like
PHP实现的多维数组排序算法分析
2018/02/10 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
javascript下数值型比较难点说明
2010/06/07 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
JQuery 绑定select标签的onchange事件，弹出选择的值，并实现跳转、传参
2011/01/06 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
jQuery实现多张图片上传预览（不经过后端处理）
2017/04/29 jQuery
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
Python 处理图片像素点的实例
2019/01/08 Python
python3实现点餐系统
2019/01/24 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
Kivari官网：在线购买波西米亚服装
2018/10/29 全球购物
法国最大的在线眼镜店：EasyLunettes
2019/08/26 全球购物
英国女性化妆品收纳和家具网站：Beautify
2019/12/07 全球购物
机修工岗位职责
2013/11/24 职场文书
转让协议书范本
2014/04/15 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
运动会广播稿200字
2014/10/18 职场文书
工商局调档介绍信
2015/10/22 职场文书
改进工作作风心得体会
2016/01/23 职场文书
创业计划书之便利店
2019/09/05 职场文书
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android