首页
所有分类
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 相关文章推荐
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
Bootstrap入门书籍之（零）Bootstrap简介
Feb 17 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
React-Native做一个文本输入框组件的实现代码
Aug 10 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
如何理解Vue前后端数据交互与显示
May 10 Vue.js
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
荷兰购物网站(99) 泰国购物网站(30) 波兰购物网站(52) 欧洲购物网站(15) 土耳其购物网站(10) 葡萄牙购物网站(13) 哥伦比亚购物网站(5) 奥地利购物网站(28) 阿联酋购物网站(26) 南非购物网站(8)
You might like
深入php self与$this的详解
2013/06/08 PHP
php中动态修改ini配置
2014/10/14 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
详述JavaScript实现继承的几种方式(推荐)
2016/03/22 Javascript
AngularJS表单验证中级篇（3）
2016/09/28 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
python通过shutil实现快速文件复制的方法
2015/03/14 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
python3 爬取图片的实例代码
2018/11/06 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
测绘工程个人的自我评价
2013/11/23 职场文书
会计专业毕业生求职信分享
2014/01/03 职场文书
平安建设工作方案
2014/06/02 职场文书
护士节活动总结
2014/08/29 职场文书
2014年会计工作总结
2014/11/27 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP