jQuery_jquery に基づいて 2 つの要素が重複しているかどうかを判断するコード-jsチュートリアル-php.cn

jQuery_jquery に基づいて 2 つの要素が重複しているかどうかを判断するコード

WBOY

リリース： 2016-05-16 17:51:41

オリジナル

1243 人が閲覧しました

核心代：

复制代代码如下:

 
$("#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 >左 1 && 左 2 < leftOne widthOne 
&& topTwo >トップ 1 && トップ 2 < topOne heightOne、
rightTop = leftTwo widthTwo > leftOne && leftTwo widthTwo <; leftOne widthOne 
&& topTwo >トップ 1 && トップ 2 < topOne heightOne、
leftBottom = leftTwo >左 1 && 左 2 < left1 widthOne 
&& topTwo heightTwo >トップ 1 && トップ 2 高さ 2 < topOne heightOne、
rightBottom = leftTwo widthTwo > leftOne && leftTwo widthTwo <; left1 widthOne 
&& topTwo heightTwo >トップ 1 && トップ 2 高さ 2 <トップ 1 高さ 1; 
左に戻るトップ ||右上 ||左下 ||右下; 
} 

原理は、ある要素の 4 つの点が別の要素の内部にあるかどうかを判断することです。 >
复制代码

代码如下:

JSCode 
LoginResult JavaScript HTML CSS ALL Edit Share 
$("#result").text(isOverlap("one","two") "," isOverlap("one"," 3") "," 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 >左 1 && 左 2 < leftOne widthOne 
&& topTwo >トップ 1 && トップ 2 < topOne heightOne、
rightTop = leftTwo widthTwo > leftOne && leftTwo widthTwo <; leftOne widthOne 
&& topTwo >トップ 1 && トップ 2 < topOne heightOne、
leftBottom = leftTwo >左 1 && 左 2 < left1 widthOne 
&& topTwo heightTwo >トップ 1 && トップ 2 高さ 2 < topOne heightOne、
rightBottom = leftTwo widthTwo > leftOne && leftTwo widthTwo <; left1 widthOne 
&& topTwo heightTwo >トップ 1 && トップ 2 高さ 2 <トップ 1 高さ 1; 
左に戻るトップ ||右上 ||左下 ||右下; 
} 
One

Two

Three


div{ 
width:200px; 
高さ:200ピクセル; 
背景:#EEE; 
} 
#two{ 
位置:絶対; 
左:100ピクセル; 
トップ:50ピクセル; 
背景:#F60; 
} 
ダウンロード 




JSCode デモ




One

Two

Three





リンクを共有 
ページに埋め込む 
Sina で共有 
QQ で共有 

作者：Artwl