DHTML 中的绝对定位_javascript技巧

WBOY
WBOYオリジナル
2016-05-16 19:23:581327ブラウズ

下面的东西显示了在复杂的情况下,
怎样最好地在一个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> 
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。