首页
所有分类
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 相关文章推荐
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 Javascript
究竟什么是Node.js？Node.js有什么好处？
May 29 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 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
vue-router-link(1) Jmerte(1) watch(1) TimePickerView(1) KVM(1) vue-cli3.x(1) 监听(2) scss(1) Yolov5(1) 项目打包(2)
You might like
php 远程关机操作的代码
2008/12/05 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
python实现多层感知器
2019/01/18 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
Python selenium的基本使用方法分析
2019/12/21 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
医疗保健专业人士购物网站：Scrubs & Beyond
2017/02/08 全球购物
软件测试题目
2013/02/27 面试题
室内设计自我鉴定
2013/10/15 职场文书
保安员岗位职责
2013/11/17 职场文书
职业培训师职业生涯规划
2014/02/18 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
三年级学生评语
2014/04/23 职场文书
代收款委托书范本
2014/10/01 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
大学生入党群众意见书
2015/06/02 职场文书
2016中秋节问候语
2015/11/11 职场文书
2019 入党申请书范文
2019/07/10 职场文书
导游词之五台山
2019/10/11 职场文书
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python