Code used to determine whether two elements overlap Based on jQuery-js tutorial

The principle is very simple. It is to determine whether the four points of an element are inside another element. If you need them, refer to the core code:

The Code is as follows:

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

The principle is very simple, that is, to determine whether the four points of an element are inside the other element.
Complete DEMO code:

The Code is as follows:

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;
}

One

Two

Three

P {
Width: 200px;
Height: 200px;
Background: # EEE;
}
# Two {
Position: absolute;
Left: 100px;
Top: 50px;
Background: # F60;
}
DownLoad




JSCode demo