Coordinates_javascript 기술을 얻기 위한 레이어 위치 지정 및 이동을 위한 JavaScript 및 Div 구현 코드
- WBOY원래의
- 2016-05-16 18:20:05949검색
1: 레이어를 이동하여 절대 위치 지정을 위한 점의 x축 및 y축 좌표를 얻습니다(참고: 수직 풀다운 상자는 x축 및 y축 좌표 값에 영향을 미칩니다)
var x,y,z,down= false,obj
function init(){
obj=event.srcElement //이벤트 트리거 객체
obj.setCapture() //현재 객체에 속하는 마우스 캡처 설정
z=obj. style.zIndex //객체의 z축 좌표 값을 가져옵니다
/ /객체의 z축 좌표 값을 100으로 설정하여 현재 레이어가 전면에 표시되도록 합니다
obj.style. zIndex=100
x=event.offsetX //이벤트를 발생시킨 객체를 기준으로 마우스 포인터 위치의 X 좌표를 가져옵니다.
y=event.offsetY //상대적으로 마우스 포인터 위치의 Y 좌표를 가져옵니다. 이벤트를 트리거한 객체에
down=true //부울 값, 마우스를 눌렀는지 여부를 결정합니다. true는 눌림을 의미하고, false는 누르지 않음을 의미합니다.
}
function moveit(){
/ /마우스를 눌렀고 onmouseover 및 onmousedown 이벤트가 동일한 객체에서 발생하는지 판단
if(down&&event.srcElement==obj){
with(obj.style){
/*X 설정 X축 방향으로 문서의 스크롤 거리에 대한 객체의 좌표 값에 현재 마우스 포인터를 더한 값에 해당하는 문서 객체의 X 좌표 값에서 마우스를 눌렀을 때의 상대 포인터 위치를 뺀 값을 기준으로 합니다. 이벤트를 발생시킨 객체*/
// posLeft=event.x-x;
posLeft=document.body.scrollLeft event.x-x;
/*객체의 Y 좌표 값을 Y의 문서로 설정 축 방향의 스크롤 거리에 현재 마우스 포인터를 더한 값은 문서 객체의 Y 좌표 값에서 마우스를 눌렀을 때 이벤트를 트리거한 객체를 기준으로 한 포인터 위치의 Y 좌표를 뺀 것과 같습니다. */
/ / posTop=event.y-y;
posTop=document.body.scrollTop event.y-y;
window.status="posLeft=" posLeft ",posTop=" posTop; "clientX=" event.clientX "clientY =" event.clientY "scrollLeft=" document.body.scrollLeft "scrollTop=" document.body.scrollTop ",event.y=" event.y ",event.x" 이벤트. x;
}
}
}
function stopdrag(){
//onmouseup 이벤트가 발생하면 마우스가 해제되었음을 의미하므로 down 변수 값을 false
down=false
obj.style.zIndex= z //객체의 Z축 좌표값 복원
obj.releaseCapture() //현재 객체의 마우스 캡처 해제
//alert("X:" obj.style.left ";Y:" obj.style .top)
}
2: 레이어는 다른 해상도 브라우저에서 동일한 효과를 표시하므로 레이어 위치를 설정해야 합니다.
1단계: 가장 바깥쪽 레이어의 상대 위치
2단계: 상대 위치 지정 수행(해상도 변경에 따라 레이어가 변형되지 않도록) )
ALT="" /> /div>
//================= = (레이어 이동 메소드 호출) = ============================
코드 복사 코드는 다음과 같습니다.
var x,y,z,down= false,obj
function init(){
obj=event.srcElement //이벤트 트리거 객체
obj.setCapture() //현재 객체에 속하는 마우스 캡처 설정
z=obj. style.zIndex //객체의 z축 좌표 값을 가져옵니다
/ /객체의 z축 좌표 값을 100으로 설정하여 현재 레이어가 전면에 표시되도록 합니다
obj.style. zIndex=100
x=event.offsetX //이벤트를 발생시킨 객체를 기준으로 마우스 포인터 위치의 X 좌표를 가져옵니다.
y=event.offsetY //상대적으로 마우스 포인터 위치의 Y 좌표를 가져옵니다. 이벤트를 트리거한 객체에
down=true //부울 값, 마우스를 눌렀는지 여부를 결정합니다. true는 눌림을 의미하고, false는 누르지 않음을 의미합니다.
}
function moveit(){
/ /마우스를 눌렀고 onmouseover 및 onmousedown 이벤트가 동일한 객체에서 발생하는지 판단
if(down&&event.srcElement==obj){
with(obj.style){
/*X 설정 X축 방향으로 문서의 스크롤 거리에 대한 객체의 좌표 값에 현재 마우스 포인터를 더한 값에 해당하는 문서 객체의 X 좌표 값에서 마우스를 눌렀을 때의 상대 포인터 위치를 뺀 값을 기준으로 합니다. 이벤트를 발생시킨 객체*/
// posLeft=event.x-x;
posLeft=document.body.scrollLeft event.x-x;
/*객체의 Y 좌표 값을 Y의 문서로 설정 축 방향의 스크롤 거리에 현재 마우스 포인터를 더한 값은 문서 객체의 Y 좌표 값에서 마우스를 눌렀을 때 이벤트를 트리거한 객체를 기준으로 한 포인터 위치의 Y 좌표를 뺀 것과 같습니다. */
/ / posTop=event.y-y;
posTop=document.body.scrollTop event.y-y;
window.status="posLeft=" posLeft ",posTop=" posTop; "clientX=" event.clientX "clientY =" event.clientY "scrollLeft=" document.body.scrollLeft "scrollTop=" document.body.scrollTop ",event.y=" event.y ",event.x" 이벤트. x;
}
}
}
function stopdrag(){
//onmouseup 이벤트가 발생하면 마우스가 해제되었음을 의미하므로 down 변수 값을 false
down=false
obj.style.zIndex= z //객체의 Z축 좌표값 복원
obj.releaseCapture() //현재 객체의 마우스 캡처 해제
//alert("X:" obj.style.left ";Y:" obj.style .top)
}
2: 레이어는 다른 해상도 브라우저에서 동일한 효과를 표시하므로 레이어 위치를 설정해야 합니다.
1단계: 가장 바깥쪽 레이어의 상대 위치
코드 복사 코드는 다음과 같습니다.
2단계: 상대 위치 지정 수행(해상도 변경에 따라 레이어가 변형되지 않도록) )
코드 복사 코드는 다음과 같습니다.
ALT="" /> /div> 생략
생략
생략
생략
생략
생략
생략
생략
//================= = (레이어 이동 메소드 호출) = ============================
코드 복사 코드는 다음과 같습니다:
onmouseup=stopdrag()
style="position:absolute;left:60 ;top:190;width:5;height:5;z-index:99;;border:1px solid #000000;">
D
< /div>
style="position:absolute;left:60 ;top:190;width:5;height:5;z-index:99;;border:1px solid #000000;">
D
< /div>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.