DHTML 中的绝对定位_javascript技巧

下面的东西显示了在复杂的情况下，
怎样最好地在一个Element的旁边显示某个DIV。
当然，你可以滚动窗口，使这个按纽靠窗口的 左/上/右/下 的情况，观察菜单的弹出方位。
全部代码:

复制代码 代码如下:

 
 
 

table1	table1
table1	div1 start        ClickMe       div1 end

 

-

 
 
 
 

table2	table2
table2	div2 start        div2menu     div2menu     div2menu     div2menu     div2menu        div2 end

 
<script> <BR>//get the position of a element ( by the scroll offset ) <BR>function LostinetWebGetScrollPostion(e) <BR>{ <BR> var b=e.document.body; <BR> if(e==b)return {left:0,top:0}; <BR> with(e.getBoundingClientRect()) <BR> { <BR> return {left:b.scrollLeft+left,top:b.scrollTop+top}; <BR> } <BR>} <BR>//get the position of a element ( by the client offset ) <BR>function LostinetWebGetClientPosition(e) <BR>{ <BR> var b=e.document.body; <BR> if(e==b)return {left:-b.scrollLeft,top:-b.scrollTop}; <BR> with(e.getBoundingClientRect()) <BR> { <BR> return {left:left-b.clientLeft,top:top-b.clientTop}; <BR> } <BR>} <BR>//get absolute or relative parent <BR>function LostinetWebGetStandParent(e) <BR>{ <BR> for(var p=e.parentElement;p!=null;p=p.parentElement) <BR> { <BR> var sp=p.currentStyle.position; <BR> if(sp=='absolute'||sp=='relative') <BR> return p; <BR> } <BR> return e.document.body; <BR>} <BR>//calc the position of floate that relative to e <BR>function LostinetWebCalcPosition(floate,e) <BR>{ <BR> var epos=LostinetWebGetScrollPostion(e); <BR> var spos=LostinetWebGetScrollPostion(LostinetWebGetStandParent(floate)); <BR> var s=LostinetWebGetStandParent(floate); <BR> return {left:epos.left-spos.left-s.clientLeft,top:epos.top-spos.top-s.clientTop}; <BR>} <BR>//get the best position to put the floate <BR>function LostinetWebAdjustMirror(floate,e,pos) <BR>{ <BR> //c:Client,f:floate,e:e,p:floate's StandParent,m:Mirror <BR> var cw=e.document.body.clientWidth; <BR> var ch=e.document.body.clientHeight; <BR> var fw=floate.offsetWidth; <BR> var fh=floate.offsetHeight; <BR> var ew=e.offsetWidth; <BR> var eh=e.offsetHeight; <BR> var ecpos=LostinetWebGetClientPosition(e); <BR> var empos={left:ecpos.left+ew/2,top:ecpos.top+eh/2}; <BR> var pcpos=LostinetWebGetClientPosition(LostinetWebGetStandParent(floate)); <BR> var fcpos=LostinetWebGetClientPosition(floate); <BR> var fmpos={left:pcpos.left+pos.left+fw/2,top:pcpos.top+pos.top+fh/2}; <BR> //left<-->right <BR> 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)) ) <BR> fmpos.left=empos.left*2-fmpos.left; <BR> //top<-->bottom <BR> 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)) ) <BR> fmpos.top=empos.top*2-fmpos.top; <BR> pos.left=fmpos.left-pcpos.left-fw/2; <BR> pos.top=fmpos.top-pcpos.top-fh/2; <BR>} <BR>document.attachEvent('onclick',function f() <BR>{ <BR> if(div1button.contains(event.srcElement))return; <BR> if(div2menu.contains(event.srcElement))return; <BR> div2menu.runtimeStyle.display='none'; <BR>}); <BR>function div1button.onclick() <BR>{ <BR> div2menu.runtimeStyle.display='block'; <BR> var pos=LostinetWebCalcPosition(div2menu,div1button); <BR> pos.top+=div1button.offsetHeight; <BR> LostinetWebAdjustMirror(div2menu,div1button,pos); <BR> div2menu.runtimeStyle.left=pos.left; <BR> div2menu.runtimeStyle.top=pos.top; <BR>} <BR></script>