首页
所有分类
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生成随机字符串的多种方法
Jun 10 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
ReactNative列表ListView的用法
Aug 02 Javascript
vuex的简单使用教程
Feb 02 Javascript
详解webpack之图片引入-增强的file-loader：url-loader
Oct 08 Javascript
JS 验证码功能的三种实现方式
Nov 26 Javascript
Vue插件之滑动验证码用法详解
Apr 05 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
sout(1) protocol(1) Stater(1) XPathParser(1) 404(1) CAD(1) csgo(1) xps(1) macos(1) 403(1)
You might like
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
php微信开发之图片回复功能
2018/06/14 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
ejs v9 javascript模板系统
2012/03/21 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
javascript学习笔记（五）原型和原型链详解
2014/10/08 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
python中zip()方法应用实例分析
2016/04/16 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
欧舒丹美国官网：L’Occitane美国
2018/02/23 全球购物
如何写好自荐信
2014/04/07 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
个人查摆剖析材料
2014/10/16 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
护士自荐信范文（2016推荐篇）
2016/01/28 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers