CSS 코드
코드 사본은 다음과 같습니다.
<스타일 유형 = "텍스트/CSS">
* {
여백 : 0px;
패딩 : 0px;
Font-Family : "Micsoft Yahei", "Microsoft Yahei";
글꼴 크기 : 15px;
}
div {
너비 : 50px;
높이 : 50px;
배경 : #F00;
Border-Radius : 5px;
-Moz 국경 Radius : 5px;
-webkit-border-radius : 5px;
커서 : 포인터;
위치 : 절대;
상단 : 60px;
왼쪽 : 30px;
}
입력{
위치 : 절대;
상단 : 10px;
왼쪽 : 10px;
패딩 : 3px;
커서 : 포인터;
}
</스타일>
HTML 코드
코드 사본은 다음과 같습니다.
<body>
<입력 유형 = "버튼"value = "원래 방식으로 반환"/>
<div> </div>
</body>
자바 스크립트 코드
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
// 1. 마우스를 트리거로 클릭하여 시작하십시오.
// 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-dodiv.offsetleft;
var disy = event.clienty-dodiv.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;
};
거짓을 반환합니다.
}
// 원래 리턴의 핵심은 움직일 때 좌표를 녹음 한 다음 배열을 재정렬 한 다음 타이머를 설정하여 배열에서 넓은 값을 객체에 할당하는 것입니다.
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";
i ++;
if (i == arrtop.length) {
ClearInterval (obtn.time);
arrtop = [];
arrleft = [];
}
}, 20);
}
}
</스크립트>