DHTML 中的绝对定位
发布时间：2006-11-26 作者： 来源：转载
下面的东西显示了在复杂的情况下，怎样最好地在一个Element的旁边显示某个DIV。当然，你可以滚动窗口，使这个按纽靠窗口的左/上/右/下的情况，观察菜单的弹出方位。全部代码:复制代码代码如下:table1table1table1div1startClickMediv1end-table2table2table2d
下面的东西显示了在复杂的情况下，
怎样最好地在一个Element的旁边显示某个DIV。
当然，你可以滚动窗口，使这个按纽靠窗口的左/上/右/下的情况，观察菜单的弹出方位。
全部代码:
复制代码 代码如下:
| table1 | table1 |
| table1 |
div1start
ClickMe
div1end
|
-
| table2 | table2 |
| table2 |
div2start
div2menu
div2menu
div2menu
div2menu
div2menu
div2end
|
//getthepositionofaelement(bythescrolloffset)
functionLostinetWebGetScrollPostion(e)
{
varb=e.document.body;
if(e==b)return{left:0,top:0};
with(e.getBoundingClientRect())
{
return{left:b.scrollLeft+left,top:b.scrollTop+top};
}
}
//getthepositionofaelement(bytheclientoffset)
functionLostinetWebGetClientPosition(e)
{
varb=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};
}
}
//getabsoluteorrelativeparent
functionLostinetWebGetStandParent(e)
{
for(varp=e.parentElement;p!=null;p=p.parentElement)
{
varsp=p.currentStyle.position;
if(sp=='absolute'||sp=='relative')
returnp;
}
returne.document.body;
}
//calcthepositionoffloatethatrelativetoe
functionLostinetWebCalcPosition(floate,e)
{
varepos=LostinetWebGetScrollPostion(e);
varspos=LostinetWebGetScrollPostion(LostinetWebGetStandParent(floate));
vars=LostinetWebGetStandParent(floate);
return{left:epos.left-spos.left-s.clientLeft,top:epos.top-spos.top-s.clientTop};
}
//getthebestpositiontoputthefloate
functionLostinetWebAdjustMirror(floate,e,pos)
{
//c:Client,f:floate,e:e,p:floate'sStandParent,m:Mirror
varcw=e.document.body.clientWidth;
varch=e.document.body.clientHeight;
varfw=floate.offsetWidth;
varfh=floate.offsetHeight;
varew=e.offsetWidth;
vareh=e.offsetHeight;
varecpos=LostinetWebGetClientPosition(e);
varempos={left:ecpos.left+ew/2,top:ecpos.top+eh/2};
varpcpos=LostinetWebGetClientPosition(LostinetWebGetStandParent(floate));
varfcpos=LostinetWebGetClientPosition(floate);
varfmpos={left:pcpos.left+pos.left+fw/2,top:pcpos.top+pos.top+fh/2};
//left<-->right
if((fmpos.leftcw)&&((empos.left*2-fmpos.left)-fw/2>=0)))
fmpos.left=empos.left*2-fmpos.left;
//top<-->bottom
if((fmpos.topch)&&((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',functionf()
{
if(div1button.contains(event.srcElement))return;
if(div2menu.contains(event.srcElement))return;
div2menu.runtimeStyle.display='none';
});
functiondiv1button.onclick()
{
div2menu.runtimeStyle.display='block';
varpos=LostinetWebCalcPosition(div2menu,div1button);
pos.top+=div1button.offsetHeight;
LostinetWebAdjustMirror(div2menu,div1button,pos);
div2menu.runtimeStyle.left=pos.left;
div2menu.runtimeStyle.top=pos.top;
}
