The simple principle is to determine whether four points of an element are within another element.
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" >div{
width:200px;
height:200px;
Background: #EEE;
}
#two {
Position:absolute;
left:100px;
top:50px;
Background: #F60;
}
DownLoad
<! DOCTYPE html>
<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>
<body>
<div id= "One" >One</div>
<div id= "Two" >Two</div>
<div id= "three" >Three</div>
<H1 id= "Result" ><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>
Share Link
Embed on your Page
Share on Sina
Share on QQ
