编程 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查看html源文件

Nov 08 Javascript

JQuery处理json与ajax返回JSON实例代码

Jan 03 Javascript

从数据库读取数据后将其输出成html标签的三种方法

Oct 13 Javascript

IE下支持文本框和密码框placeholder效果的JQuery插件分享

Jan 31 Javascript

JavaScript中this的四个绑定规则总结

Sep 26 Javascript

AngularJS动态绑定ng-options的ng-model实例代码

Jun 21 Javascript

自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结

Aug 18 Javascript

React Native 通告消息竖向轮播组件的封装

Aug 25 Javascript

JavaScript执行环境及作用域链实例分析

Aug 01 Javascript

vue-router的两种模式的区别

May 30 Javascript

JavaScript写个贪吃蛇小游戏(超详细)

Mar 17 Javascript

jquery实现抽奖功能

Oct 22 jQuery

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中OO之静态关键字以及类常量的详解

2013/06/07 PHP

PHP整数取余返回负数的相关解决方法

2014/05/15 PHP

php中删除数组的第一个元素和最后一个元素的函数

2015/03/07 PHP

YII框架中使用memcache的方法详解

2017/08/02 PHP

PHP生成图表pChart的示例解析

2020/07/31 PHP

使用jquery插件实现图片延迟加载技术详细说明

2011/03/12 Javascript

浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)

2013/07/09 Javascript

jQuery提示效果代码分享

2014/11/20 Javascript

使用jquery菜单插件HoverTree仿京东无限级菜单

2014/12/18 Javascript

使用Node.js为其他程序编写扩展的基本方法

2015/06/23 Javascript

谈谈Jquery中的children find 的区别有哪些

2015/10/19 Javascript

jQuery unbind()方法实例详解

2016/01/19 Javascript

javascript实现右侧弹出“分享到”窗口效果

2016/02/01 Javascript

jquery拖拽排序简单实现方法(效果增强版)

2016/02/16 Javascript

一道优雅面试题分析js中fn()和return fn()的区别

2016/07/05 Javascript

jQuery使用getJSON方法获取json数据完整示例

2016/09/13 Javascript

基于JQuery实现的跑马灯效果（文字无缝向上翻动）

2016/12/02 Javascript

开源免费天气预报接口API及全国所有地区代码(国家气象局提供）

2016/12/26 Javascript

利用js判断手机是否安装某个app的多种方案

2017/02/13 Javascript

vue如何将v-for中的表格导出来

2018/05/07 Javascript

Bootstrap 模态框自定义点击和关闭事件详解

2018/08/10 Javascript

[02:31]《DAC最前线》之选手酒店现场花絮

2015/01/30 DOTA

Python中的默认参数详解

2015/06/24 Python

Pycharm+Scrapy安装并且初始化项目的方法

2019/01/15 Python

Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)

2019/05/13 Python

在cmd中查看python的安装路径方法

2019/07/03 Python

Python字符串和正则表达式中的反斜杠('\')问题详解

2019/09/03 Python

用pandas划分数据集实现训练集和测试集

2020/07/20 Python

python GUI计算器的实现

2020/10/09 Python

亚马逊海外购：亚马逊美国、英国、日本、德国直邮

2021/03/18 全球购物

什么是接口(Interface)？

2013/02/01 面试题

收银出纳员岗位职责

2014/02/23 职场文书

品质主管岗位职责

2014/03/16 职场文书

欢迎领导检查标语

2014/06/27 职场文书

2014年教育教学工作总结

2014/11/13 职场文书

css3属性选择器 “~”（波浪号） “，”（逗号） “+”（加号）和 “>”（大于号）

2022/04/19 HTML / CSS