집 >웹 프론트엔드 >JS 튜토리얼 >DHTML_javascript 팁의 절대 위치 지정

DHTML_javascript 팁의 절대 위치 지정

WBOY원래의: 2016-05-16 19:23:581314검색

다음은
복잡한 상황에서 요소 옆에 DIV를 가장 잘 표시하는 방법을 보여줍니다.
물론 버튼이 창의 왼쪽/위/오른쪽/아래에 가까이 오도록 창을 스크롤하면서 메뉴의 팝업 위치를 관찰할 수도 있습니다.
모든 코드:

코드 복사 코드는 다음과 같습니다.

table1	table1
table1	div1 start ClickMe div1 end

//요소의 위치 가져오기(스크롤 오프셋을 통해)
if(e==b)return {왼쪽:0,위:0};
with(e.getBoundingClientRect())
{
  return {left:b.scrollLeft left,top:b.scrollTop top};
}
}
//요소의 위치 가져오기(클라이언트 오프셋으로)
함수 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};
}
}
//절대 또는 상대 상위 가져오기
함수 LostinetWebGetStandParent(e)
{
for(var p=e.parentElement;p!=null;p=p .parentElement)
{
  var sp=p.currentStyle.position;
  if(sp=='absolute'||sp=='relative')
   return p;
}
e.document.body를 반환합니다.
}
//calc e에 상대적인 floate의 위치
함수 LostinetWebCalcPosition(floate,e)
{
var epos=LostinetWebGetScrollPostion(e);
var spos=LostinetWebGetScrollPostion(LostinetWebGetStandParent(floate));
var s=LostinetWebGetStandParent(floate);
반환 {left:epos.left-spos.left-s.clientLeft,top:epos.top-spos.top-s.clientTop};
}
//floate를 배치할 수 있는 가장 좋은 위치를 얻습니다.
함수 LostinetWebAdjustMirror(floate,e,pos)
{
//c:Client,f:floate,e:e, p:floate의 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};
//왼쪽<-->오른쪽
if( (fmpos.leftcw)&&((empos.left*2-fmpos.left)-fw/2>=0)) )
  fmpos. 왼쪽=empos.left*2-fmpos.left;
//topbottom
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',function f()
{
if(div1button.contains(event.srcElement))return;
if(div2menu.contains(event. srcElement))return;
div2menu.runtimeStyle.display='none';
});
기능 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;
}

성명：

이전 기사：데이터 중복 제거 알고리즘_기본 지식다음 기사：데이터 중복 제거 알고리즘_기본 지식

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

DHTML_javascript 팁의 절대 위치 지정

관련 기사