编程 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 相关文章推荐

MooTools 1.2中的Drag.Move来实现拖放

Sep 15 Javascript

jQuery 美元符冲突的解决方法

Mar 28 Javascript

JavaScript高级程序设计阅读笔记（七） ECMAScript中的语句

Feb 27 Javascript

JavaScript函数的4种调用方法详解

Apr 22 Javascript

JQuery的Ajax中Post方法传递中文出现乱码的解决方法

Oct 21 Javascript

浅谈vuepress 踩坑记

Apr 18 Javascript

JS实现的缓冲运动效果示例

Apr 30 Javascript

vue 路由嵌套高亮问题的解决方法

May 17 Javascript

JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例

Jul 30 Javascript

Vue中keep-alive组件作用详解

Feb 04 Javascript

原生javascript制作贪吃蛇小游戏的方法分析

Feb 26 Javascript

ES6 Generator基本使用方法示例

Jun 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

You might like

PHP 实现多服务器共享 SESSION 数据

2009/08/15 PHP

phpmyadmin出现Cannot start session without errors问题解决方法

2014/08/14 PHP

js 实现css风格选择器（压缩后2KB）

2012/01/12 Javascript

javascript检测对象中是否存在某个属性判断方法小结

2013/05/19 Javascript

jQuery设置与获取HTML,文本和值的简单实例

2014/02/26 Javascript

防止登录页面出现在frame中js代码

2014/07/22 Javascript

基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解

2015/03/05 Javascript

jquery使用经验小结

2015/05/20 Javascript

js实现拖拽效果（构造函数）

2015/12/14 Javascript

基于jQuery实现的查看全文功能【实用】

2016/12/11 Javascript

JavaScript数组操作详解

2017/02/04 Javascript

基于JavaScript实现百度搜索框效果

2020/06/28 Javascript

分析javascript中9 个常见错误阻碍你进步

2017/09/18 Javascript

100行代码实现vue表单校验功能(小白自编)

2019/11/19 Javascript

解决新建一个vue项目过程中遇到的问题

2020/10/22 Javascript

Vue 组件注册全解析

2020/12/17 Vue.js

[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16

2019/08/17 DOTA

Python编程实现正则删除命令功能

2017/08/30 Python

使用pandas读取csv文件的指定列方法

2018/04/21 Python

Python学习笔记之open()函数打开文件路径报错问题

2018/04/28 Python

pandas求两个表格不相交的集合方法

2018/12/08 Python

python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例

2019/08/27 Python

基于Python3读写INI配置文件过程解析

2020/07/23 Python

python 无损批量压缩图片（支持保留图片信息）的示例

2020/09/22 Python

Skyscanner台湾：全球知名的旅行比价引擎

2018/07/01 全球购物

英国玛莎百货美国官网：Marks & Spencer美国

2018/11/06 全球购物

介绍一下linux的文件权限

2012/02/15 面试题

有创意的广告词

2014/03/18 职场文书

班主任对学生的评语

2014/04/26 职场文书

如何撰写一封出色的求职信

2014/04/27 职场文书

出国英文推荐信

2014/05/10 职场文书

竞争与合作演讲稿

2014/05/12 职场文书

2014年纠风工作总结

2014/12/08 职场文书

元宵节寄语大全

2015/02/27 职场文书

慰问信格式规范

2015/03/23 职场文书

Python入门学习之类的相关知识总结

2021/05/25 Python