DHTML 中的絕對(duì)定位
更新時(shí)間:2006年11月26日 00:00:00 作者:
下面的東西顯示了在復(fù)雜的情況下,
怎樣最好地在一個(gè)Element的旁邊顯示某個(gè)DIV。
當(dāng)然,你可以滾動(dòng)窗口,使這個(gè)按紐靠窗口的 左/上/右/下 的情況,觀察菜單的彈出方位。
全部代碼:
怎樣最好地在一個(gè)Element的旁邊顯示某個(gè)DIV。
當(dāng)然,你可以滾動(dòng)窗口,使這個(gè)按紐靠窗口的 左/上/右/下 的情況,觀察菜單的彈出方位。
全部代碼:
復(fù)制代碼 代碼如下:
<table border=1 cellpadding=8 cellspacing=0>
<tr><td>table1</td><td>table1</td></tr>
<tr><td>table1</td><td>
<div id=div1 style='position:absolute;background-color:wheat;padding:4px;'>
div1 start
<div id=div1button style='border:outset 2px;background-color:threedface;color:red;font-weight:bold;cursor:hand;padding:4px;'>
ClickMe
</div>
div1 end
</div>
</td></tr>
</table>
<div style='height:100px'>-</div>
<table border=1 cellpadding=8 cellspacing=0>
<tr><td>table2</td><td>table2</td></tr>
<tr><td>table2</td><td>
<div id=div2 style='position:relative;left:24px;background-color:wheat;'>
div2 start
<div id=div2menu style='display:none;position:absolute;background-color:lightgrey;height:200px;width:120px;border:outset 1px;padding:4px'>
div2menu<br>
div2menu<br>
div2menu<br>
div2menu<br>
div2menu<br>
</div>
div2 end
</div>
</td></tr>
</table>
<script language='jscript'>
//get the position of a element ( by the scroll offset )
function LostinetWebGetScrollPostion(e)
{
var b=e.document.body;
if(e==b)return {left:0,top:0};
with(e.getBoundingClientRect())
{
return {left:b.scrollLeft+left,top:b.scrollTop+top};
}
}
//get the position of a element ( by the client offset )
function LostinetWebGetClientPosition(e)
{
var b=e.document.body;
if(e==b)return {left:-b.scrollLeft,top:-b.scrollTop};
with(e.getBoundingClientRect())
{
return {left:left-b.clientLeft,top:top-b.clientTop};
}
}
//get absolute or relative parent
function LostinetWebGetStandParent(e)
{
for(var p=e.parentElement;p!=null;p=p.parentElement)
{
var sp=p.currentStyle.position;
if(sp=='absolute'||sp=='relative')
return p;
}
return e.document.body;
}
//calc the position of floate that relative to e
function LostinetWebCalcPosition(floate,e)
{
var epos=LostinetWebGetScrollPostion(e);
var spos=LostinetWebGetScrollPostion(LostinetWebGetStandParent(floate));
var s=LostinetWebGetStandParent(floate);
return {left:epos.left-spos.left-s.clientLeft,top:epos.top-spos.top-s.clientTop};
}
//get the best position to put the floate
function LostinetWebAdjustMirror(floate,e,pos)
{
//c:Client,f:floate,e:e,p:floate's StandParent,m:Mirror
var cw=e.document.body.clientWidth;
var ch=e.document.body.clientHeight;
var fw=floate.offsetWidth;
var fh=floate.offsetHeight;
var ew=e.offsetWidth;
var eh=e.offsetHeight;
var ecpos=LostinetWebGetClientPosition(e);
var empos={left:ecpos.left+ew/2,top:ecpos.top+eh/2};
var pcpos=LostinetWebGetClientPosition(LostinetWebGetStandParent(floate));
var fcpos=LostinetWebGetClientPosition(floate);
var fmpos={left:pcpos.left+pos.left+fw/2,top:pcpos.top+pos.top+fh/2};
//left<-->right
if( (fmpos.left<empos.left) ? ((fmpos.left-fw/2<0)&&((empos.left*2-fmpos.left)+fw/2<=cw)) : ((fmpos.left+fw/2>cw)&&((empos.left*2-fmpos.left)-fw/2>=0)) )
fmpos.left=empos.left*2-fmpos.left;
//top<-->bottom
if( (fmpos.top<empos.top) ? ((fmpos.top-fh/2<0)&&((empos.top*2-fmpos.top)+fh/2<=ch)) : ((fmpos.top+fh/2>ch)&&((empos.top*2-fmpos.top)-fh/2>=0)) )
fmpos.top=empos.top*2-fmpos.top;
pos.left=fmpos.left-pcpos.left-fw/2;
pos.top=fmpos.top-pcpos.top-fh/2;
}
document.attachEvent('onclick',function f()
{
if(div1button.contains(event.srcElement))return;
if(div2menu.contains(event.srcElement))return;
div2menu.runtimeStyle.display='none';
});
function div1button.onclick()
{
div2menu.runtimeStyle.display='block';
var pos=LostinetWebCalcPosition(div2menu,div1button);
pos.top+=div1button.offsetHeight;
LostinetWebAdjustMirror(div2menu,div1button,pos);
div2menu.runtimeStyle.left=pos.left;
div2menu.runtimeStyle.top=pos.top;
}
</script>
<tr><td>table1</td><td>table1</td></tr>
<tr><td>table1</td><td>
<div id=div1 style='position:absolute;background-color:wheat;padding:4px;'>
div1 start
<div id=div1button style='border:outset 2px;background-color:threedface;color:red;font-weight:bold;cursor:hand;padding:4px;'>
ClickMe
</div>
div1 end
</div>
</td></tr>
</table>
<div style='height:100px'>-</div>
<table border=1 cellpadding=8 cellspacing=0>
<tr><td>table2</td><td>table2</td></tr>
<tr><td>table2</td><td>
<div id=div2 style='position:relative;left:24px;background-color:wheat;'>
div2 start
<div id=div2menu style='display:none;position:absolute;background-color:lightgrey;height:200px;width:120px;border:outset 1px;padding:4px'>
div2menu<br>
div2menu<br>
div2menu<br>
div2menu<br>
div2menu<br>
</div>
div2 end
</div>
</td></tr>
</table>
<script language='jscript'>
//get the position of a element ( by the scroll offset )
function LostinetWebGetScrollPostion(e)
{
var b=e.document.body;
if(e==b)return {left:0,top:0};
with(e.getBoundingClientRect())
{
return {left:b.scrollLeft+left,top:b.scrollTop+top};
}
}
//get the position of a element ( by the client offset )
function LostinetWebGetClientPosition(e)
{
var b=e.document.body;
if(e==b)return {left:-b.scrollLeft,top:-b.scrollTop};
with(e.getBoundingClientRect())
{
return {left:left-b.clientLeft,top:top-b.clientTop};
}
}
//get absolute or relative parent
function LostinetWebGetStandParent(e)
{
for(var p=e.parentElement;p!=null;p=p.parentElement)
{
var sp=p.currentStyle.position;
if(sp=='absolute'||sp=='relative')
return p;
}
return e.document.body;
}
//calc the position of floate that relative to e
function LostinetWebCalcPosition(floate,e)
{
var epos=LostinetWebGetScrollPostion(e);
var spos=LostinetWebGetScrollPostion(LostinetWebGetStandParent(floate));
var s=LostinetWebGetStandParent(floate);
return {left:epos.left-spos.left-s.clientLeft,top:epos.top-spos.top-s.clientTop};
}
//get the best position to put the floate
function LostinetWebAdjustMirror(floate,e,pos)
{
//c:Client,f:floate,e:e,p:floate's StandParent,m:Mirror
var cw=e.document.body.clientWidth;
var ch=e.document.body.clientHeight;
var fw=floate.offsetWidth;
var fh=floate.offsetHeight;
var ew=e.offsetWidth;
var eh=e.offsetHeight;
var ecpos=LostinetWebGetClientPosition(e);
var empos={left:ecpos.left+ew/2,top:ecpos.top+eh/2};
var pcpos=LostinetWebGetClientPosition(LostinetWebGetStandParent(floate));
var fcpos=LostinetWebGetClientPosition(floate);
var fmpos={left:pcpos.left+pos.left+fw/2,top:pcpos.top+pos.top+fh/2};
//left<-->right
if( (fmpos.left<empos.left) ? ((fmpos.left-fw/2<0)&&((empos.left*2-fmpos.left)+fw/2<=cw)) : ((fmpos.left+fw/2>cw)&&((empos.left*2-fmpos.left)-fw/2>=0)) )
fmpos.left=empos.left*2-fmpos.left;
//top<-->bottom
if( (fmpos.top<empos.top) ? ((fmpos.top-fh/2<0)&&((empos.top*2-fmpos.top)+fh/2<=ch)) : ((fmpos.top+fh/2>ch)&&((empos.top*2-fmpos.top)-fh/2>=0)) )
fmpos.top=empos.top*2-fmpos.top;
pos.left=fmpos.left-pcpos.left-fw/2;
pos.top=fmpos.top-pcpos.top-fh/2;
}
document.attachEvent('onclick',function f()
{
if(div1button.contains(event.srcElement))return;
if(div2menu.contains(event.srcElement))return;
div2menu.runtimeStyle.display='none';
});
function div1button.onclick()
{
div2menu.runtimeStyle.display='block';
var pos=LostinetWebCalcPosition(div2menu,div1button);
pos.top+=div1button.offsetHeight;
LostinetWebAdjustMirror(div2menu,div1button,pos);
div2menu.runtimeStyle.left=pos.left;
div2menu.runtimeStyle.top=pos.top;
}
</script>
相關(guān)文章
JavaScript對(duì)象合并實(shí)現(xiàn)步驟介紹
這篇文章主要介紹了JavaScript對(duì)象合并實(shí)現(xiàn)步驟,為什么要合并?這是我在重構(gòu)代碼的時(shí)候的一個(gè)需求。簡(jiǎn)單來(lái)說(shuō),我會(huì)有若干個(gè)對(duì)象需要合并為一個(gè)對(duì)象。而這些對(duì)象為兩層,如果直接展開(kāi)或者賦值會(huì)涉及到深拷貝2023-01-01JavaScript 中判斷變量是否為數(shù)字的示例代碼
這篇文章主要介紹了JavaScript 中判斷變量是否為數(shù)字的示例代碼,代碼簡(jiǎn)單易懂對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-10-10JS異步堆棧追蹤之為什么await勝過(guò)Promise
與直接使用Promise相比,使用async/await不僅可以使代碼更具可讀性,而且還可以在JavaScript引擎中實(shí)現(xiàn)一些有趣的優(yōu)化。這篇文章是關(guān)于一個(gè)這樣的優(yōu)化,涉及異步代碼的堆棧追蹤。2021-04-04JavaScript中數(shù)組遍歷的7種方法小結(jié)
作為JavaScript開(kāi)發(fā)人員,熟悉數(shù)組的遍歷和操作是非常重要的,數(shù)組遍歷是處理和操作數(shù)組元素的基本需求之一,本文將介紹JavaScript中的7種常見(jiàn)數(shù)組遍歷方法,幫助你成為數(shù)組操作的達(dá)人2023-11-11JavaScript如何實(shí)現(xiàn)在文本框(密碼框)輸入提示語(yǔ)
為了更好的達(dá)到用戶(hù)體驗(yàn)度,我們?cè)诘卿洷韱螘r(shí)會(huì)有一些提示語(yǔ)言,比如說(shuō):“請(qǐng)輸入用戶(hù)名”和“請(qǐng)輸入密碼”等語(yǔ)言,下面小編通過(guò)本篇文章給大家分享JavaScript如何實(shí)現(xiàn)在密碼框中出現(xiàn)提示語(yǔ),對(duì)js密碼框提示語(yǔ)相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12