Coordinates_javascript 기술을 얻기 위한 레이어 위치 지정 및 이동을 위한 JavaScript 및 Div 구현 코드-JS 튜토리얼-php.cn

Coordinates_javascript 기술을 얻기 위한 레이어 위치 지정 및 이동을 위한 JavaScript 및 Div 구현 코드

WBOY

풀어 주다： 2016-05-16 18:20:05

원래의

912명이 탐색했습니다.

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>

생략

//================= = (레이어 이동 메소드 호출) = ============================

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

onmouseup=stopdrag() 
style="position:absolute;left:60 ;top:190;width:5;height:5;z-index:99;;border:1px solid #000000;"> 
D 
< /div> 

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

Coordinates_javascript 기술을 얻기 위한 레이어 위치 지정 및 이동을 위한 JavaScript 및 Div 구현 코드