基於jQuery判斷兩個元素是否有重疊部分的程式碼_jquery

核心程式碼：

複製程式碼程式碼如下：

$("#result"). (isOverlap("一","二")"," isOverlap("一","三")"," isOverlap("二"​​,"三"));
function isOverlap(idOne,idTwo ){
var objOne=$("#" idOne),
objTwo=$("#" idTwo),
offsetOne = objOne.offset(),
offsetTwo = objTwo.wooffset() ,
topOne=offsetOne.top,
topTwo=offsetTwo.top,
leftOne=offsetOne.left,
leftTwo=offsetTwo.left,
widthOne = objOne. >widthTwo = objTwo.width(),
heightOne = objOne.height(),
heightTwo = objTwo.height();
var leftTop = leftTwo >; >&& topTwo >頂部一&& 頂部二rightTop = leftTwo widthTwo > leftOne && leftTwo widthTwo 頂>左一&& 左二&& topTwo heightTwo > topOne && topTwo heightTwo rightBottom = leftTwo widthTwo > leftOne &One leftTwoftd > topOne && topTwo heightTwo 返回左側頂部||右上||左下||右下；
}


原理很簡單，就是判斷一個元素的四個點是否在另一個元素內部。
完整示範程式碼：

複製程式碼

程式碼如下：

JSCode
LoginResult JavaScript HTML CSS ALL 編輯分享
$("#result").text(isOverlap("one","two") "," isOverlap("one","三") "," isOverlap("二"​​,"三"));
function isOverlap(idOne,idTwo){
var objOne=$("#" idOne),
objTwo= $("#" idTwo),
offsetOne = objOne.offset(),
offsetTwo = objTwo.offset(),
topOne=offsetOne.top,
topTwooffsetTwo.top, topTwooffsetTwo.top,
leftOne=offsetOne.left,
leftTwo=offsetTwo.left,
widthOne = objOne.width(),
widthTwo = objTwo.width(), heightOne = objOne. 🎜>heightTwo = objTwo.height();
var leftTop = leftTwo >;左一&& 左二&& topTwo >頂部一&& 頂部二&& topTwo >頂部一&& 頂部二leftBottom = leftTwo >左一&& 左二rightBottom = leftTwo widthTwo > leftOne && leftTwo widthTwo && topTwo heightTwo > topOne &wotopTwo 🎜>&& topTwo heightTwo > topOne &wotopTwo ||heightTwo;左下||右下;
}

一

二

;

三

;

div{
寬度：200px;
高度：200px;
背景：# EEE;
}
#two{
位置：絕對；
左：100px;
上：50px;
背景：#F60;
}
下載
背景：#F60;
}
下載






div{
寬度：200px;
高度：200px;
背景：#EEE;
}
#two{
位置：絕對;
左：100px;
上：50px;
背景：#F60;
}
樣式>

頭>

一

;

二

;

三

;

$("#result").text(isOverlap("一","二") "," isOverlap("一","三") "," isOverlap( "二","三")) ;
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(wo. );
var leftTop = leftTwo >;左一&& 左二&& topTwo >頂部一&& 頂部二rightTop = leftTwo widthOne leftTwoftd
&& topTwo >頂部一&& 頂部二leftBottom = leftTwo >左一&& 左二&& topTwo heightTwo > leftOne widthOne
&& topTwo heightTwo > 頂= leftTwo widthTwo > leftOne && leftTwo widthTwo && topTwo heightTwo > topOne && topTwo heightTwo 回到左下上右🎜>回到左下一個高度一個； >}
腳本>
身體>

分享連結
嵌入您的頁面
分享到新浪
分享到QQ


作者：Artwl