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

核心代码：复制代码代码如下: $("#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的图片轮播 tab切换组件

目前只添加了scroll和none的效果，scroll即滑动的效果，可以支持x和y方向的滑动；none就是没有任何效果，只是显示和隐藏，后续需要添加其他效果再做扩展，写的有点水，呵呵，在此留笔，防止丢失。　　Demo Addres>>>详细阅读

本文标题：基于jQuery判断两个元素是否有重叠部分的代码

地址：http://www.17bianji.com/kaifa2/JS/23220.html

1/2 1