JavaScript 구현 원래 경로로 복귀_기본 지식-JS 튜토리얼-php.cn

CSS 코드

코드 복사 코드는 다음과 같습니다. * { 여백: 0px; 패딩: 0px; 글꼴 모음: "micsoft yahei","Microsoft Yahei"; 글꼴 크기: 15px; } div{ 너비: 50px; 높이: 50px; 배경: #f00; 테두리 반경: 5px ; -moz-국경-반경: 5px; -webkit-border-radius: 5px; 커서: 포인터; 위치: 절대; 상단: 60px; 왼쪽: 30px; } 입력{ 위치: 절대; 상단: 10px; 왼쪽: 10px; 패딩: 3px; 커서: 포인터; }

HTML 코드

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

자바스크립트 코드

코드 복사 코드는 다음과 같습니다. //1. div를 마우스로 클릭하여 시작합니다. //2. 마우스를 클릭하여 이동할 때 마우스 이동 이벤트를 트리거하여 배열에 데이터(이동된 좌표)를 삽입합니다. //3. 마우스가 div에서 멀어지는 것으로 끝납니다 //4. "원래 도로로 돌아가기" 버튼을 클릭하여 배열(이동된 좌표)을 탐색하고 정기적으로 배열의 좌표를 트리거하여 div를 이동시켜 "복귀" 기능을 구현합니다. window.onload=function(){ var oDiv=document.getElementsByTagName("div")[0]; var oBtn=document.getElementsByTagName("input")[0]; var time=null, arrTop=[], arrLeft=[]; oDiv.onmousedown=function(ev){ var event=ev || window.event; //div 내에서 마우스 좌표를 가져옵니다 var disX=event.clientX-oDiv.offsetLeft; var disY=event.clientY-oDiv.offsetTop; arrTop=[60]; arrLeft=[30]; document.onmousemove=function(ev){ var event=ev || window.event; //드래그 후 마우스 위치 가져오기 var l=event.clientX; var t=event.clientY; //드래그 후 개체의 위치인 드래그 후 마우스 위치에서 개체 위의 마우스 위치를 빼서 배열에 저장합니다 arrLeft.push(l-disX); arrTop.push(t-disY); oDiv.style.left=l-disX "px"; oDiv.style.top=t-disY "px"; }; document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; }; false를 반환합니다. } //원래 경로로 복귀하는 핵심은 이동 중 좌표를 기록한 후 배열을 재배치하고 타이머를 설정하여 배열의 확대 값을 객체에 할당하는 것입니다. oBtn.onclick=function(){ arrTop.reverse();//재정렬 arrLeft.reverse();//재정렬 var i=0; oBtn.time=setInterval(function(){ oDiv.style.top=arrTop[i] "px"; oDiv.style.left=arrLeft[i] "px"; 나 ; If(i==arrTop.length){ > arrTop=[]; arrLeft=[]; | },20); } }