Kode CSS
Salinan kode adalah sebagai berikut:
<type style = "text/css">
* {
margin: 0px;
padding: 0px;
Font-Family: "Micsoft Yahei", "Microsoft Yahei";
Ukuran font: 15px;
}
Div {
Lebar: 50px;
Tinggi: 50px;
Latar Belakang: #F00;
Border-Radius: 5px;
-Moz-border-Radius: 5px;
-webkit-border-radius: 5px;
kursor: pointer;
Posisi: Absolute;
Atas: 60px;
Kiri: 30px;
}
input {
Posisi: Absolute;
Atas: 10px;
Kiri: 10px;
padding: 3px;
kursor: pointer;
}
</tyle>
Kode HTML
Salinan kode adalah sebagai berikut:
<body>
<input type = "tombol" value = "return in the asli cara"/>
<div> </div>
</body>
Kode JavaScript
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
// 1. Mulailah dengan mengklik div dengan mouse sebagai pemicu.
// 2. Saat mengklik mouse untuk bergerak, memicu acara pergerakan mouse untuk menyuntikkan data ke dalam array (pindahkan koordinat)
// 3. Diakhiri dengan mouse yang menjauh dari div as
// 4. Klik tombol "asli kembali" untuk melintasi array (koordinat bergerak) dan memicu pergerakan koordinat div dalam array untuk mencapai fungsi "return".
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;
// Dapatkan koordinat mouse di 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;
// Dapatkan posisi mouse setelah menyeret
var l = event.clientx;
var t = event.clienty;
// Simpan posisi terseret ke dalam array, dan gunakan posisi mouse yang diseret untuk mengurangi posisi mouse pada objek, yang merupakan posisi objek yang diseret.
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;
};
mengembalikan false;
}
// Inti dari pengembalian asli adalah untuk merekam koordinat saat bergerak, lalu ulang array, dan atur timer untuk menetapkan nilai lebar dalam array ke objek.
obtn.onClick = function () {
arrtop.reverse (); // ulang
arrleft.reverse (); // ulang
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);
}
}
</script>