CSS -код
Кода -копия выглядит следующим образом:
<стиль типа = "text/css">
* {
поля: 0px;
Заполнение: 0px;
Фонт-семья: «Micsoft Yahei», «Microsoft Yahei»;
размер шрифта: 15px;
}
div {
Ширина: 50px;
Высота: 50px;
Фон: #F00;
граница радий: 5px;
-Моз-грамотный радий: 5px;
-Вебкит-грамотный радий: 5px;
курсор: указатель;
позиция: абсолютно;
Верх: 60px;
Слева: 30px;
}
вход{
позиция: абсолютно;
Верх: 10px;
Слева: 10px;
Заполнение: 3PX;
курсор: указатель;
}
</style>
HTML -код
Кода -копия выглядит следующим образом:
<тело>
<input type = "button" value = "return в оригинальном способе"/>
<div> </div>
</body>
код JavaScript
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
// 1. Начните с нажатия на Div с мышью в качестве триггера.
// 2. Нажав мышь для перемещения, запустите событие движения мыши, чтобы ввести данные в массив (координаты перемещения)
// 3. Заканчивать с мышью, уходящей от диви
// 4. Нажмите кнопку «Оригинальный возврат», чтобы пройти массив (движущиеся координаты) и запустить координатное движение DIV в массиве, чтобы достичь функции «Возврат».
window.onload = function () {
var Odiv = document.getElementsbytagname ("div") [0];
var octn = 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;
};
вернуть ложь;
}
// Ядро исходного возврата состоит в том, чтобы записать координаты при перемещении, затем переупорядочить массив и установить таймер для назначения широких значений в массиве объекту.
optn.onclick = function () {
arrtop.reverse (); // переупорядочение
arrleft.reverse (); // переупорядочение
var i = 0;
optn.time = setInterval (function () {
Odiv.Style.top = arrtop [i]+"px";
ODIV.Style.left = arrleft [i]+"px";
i ++;
if (i == arrtop.length) {
ClearInterval (oTPN.Time);
arrtop = [];
arrleft = [];
}
}, 20);
}
}
</script>