首页
所有分类
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 相关文章推荐
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
Javascript writable特性介绍
Feb 27 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
基于vue.js实现的分页
Mar 13 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
vue实现输入框自动跳转功能
May 20 Javascript
js闭包的9个使用场景
Dec 29 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) MIME(1) 忘记密码(1) 写入策略(1) binlog(2) redo log(1) instantclient(1) B+树(2) 优化(1) 存储过程(3)
You might like
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
Javascript操作select控件代码实例
2020/02/14 Javascript
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
Python SQLAlchemy基本操作和常用技巧（包含大量实例,非常好）
2014/05/06 Python
python中的内置函数getattr()介绍及示例
2014/07/20 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
TENSORFLOW变量作用域（VARIABLE SCOPE）
2020/01/10 Python
pandas分组聚合详解
2020/04/10 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
中科软笔试题和面试题
2014/10/07 面试题
护士实习自我鉴定
2013/10/22 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
会计核算科岗位职责
2014/03/19 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
董事长秘书工作职责
2014/06/10 职场文书
禁止酒驾标语
2014/06/25 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
python爬虫selenium模块详解
2021/03/30 Python
nginx基于域名，端口，不同IP的虚拟主机设置的实现
2021/03/31 Servers