脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery判断两个元素是否有重叠

基于jQuery判断两个元素是否有重叠部分的代码

 更新时间：2012年07月25日 17:32:58   作者：  
原理很简单，就是判断一个元素的四个点是否在另一个元素内部，需要的朋友可以参考下
核心代码：
复制代码 代码如下:

$("#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

相关文章

  • easyui Draggable组件实现拖动效果

    easyui Draggable组件实现拖动效果

    Draggable是easyui中用于实现拖拽功能的一个插件。利用它，我们可以实现控件的拖拽效果。Draggble覆盖默认值$.fn.draggable.defaults。
    2015-08-08
  • 超级酷和最实用的jQuery实例收集(20个)

    超级酷和最实用的jQuery实例收集(20个)

    二十个超级酷和最实用的jQuery实例，对于使用和学习jquery的朋友是个不错的参考与学习资料。
    2010-04-04
  • 基于jquery实现多级菜单效果

    基于jquery实现多级菜单效果

    这篇文章主要为大家详细介绍了基于jquery实现多级菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • JQuery实现自定义滚动条的方法

    JQuery实现自定义滚动条的方法

    这篇文章主要给大家介绍了关于JQuery实现自定义滚动条的方法,通过本文的介绍你可以换掉千篇一律的默认滚动条,让你的网站或web项目更具特色,文章通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • jquery easyui 结合jsp简单展现table数据示例

    jquery easyui 结合jsp简单展现table数据示例

    这篇文章主要介绍了jquery easyui 结合jsp简单展现table数据,需要的朋友可以参考下
    2014-04-04
  • jQuery内容筛选选择器实例代码

    jQuery内容筛选选择器实例代码

    这篇文章主要为大家详细介绍了jQuery内容筛选选择器实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • jquery 步骤进度轴插件的实现代码

    jquery 步骤进度轴插件的实现代码

    今天给大家分享一个jquery插件之步骤进度轴的实现思路，这个功能在一些网站注册账号时一般都会用到，今天就通过实例代码给大家详细介绍下，感兴趣的朋友跟随小编一起看看吧
    2021-05-05
  • 详解jquery选择器的原理

    详解jquery选择器的原理

    这篇文章主要介绍了详解jquery选择器的原理的相关资料,就是jquery原型里面有一个init初始化的方法，将传入的值进行解析，比如传入的id还是class还是标签名，需要的朋友可以参考下
    2017-08-08
  • jQuery基础知识点总结(必看)

    jQuery基础知识点总结(必看)

    下面小编就为大家带来一篇jQuery基础知识点总结(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 七个不允许错过的jQuery小技巧

    七个不允许错过的jQuery小技巧

    这篇文章主要介绍了七个不允许错过的jQuery小技巧，帮助WEB开发人员开发出有创意和漂亮的WEB页面,需要的朋友可以参考下
    2015-12-12

最新评论