CSS -Code
Die Codekopie lautet wie folgt:
<style type = "text/css">
* {{
Rand: 0px;
Polsterung: 0px;
Schriftfamilie: "Micsoft Yahei", "Microsoft Yahei";
Schriftgröße: 15px;
}
div {
Breite: 50px;
Höhe: 50px;
Hintergrund: #f00;
Border-Radius: 5px;
-moz-border-radius: 5px;
-Webkit-Border-Radius: 5px;
Cursor: Zeiger;
Position: absolut;
Oben: 60px;
links: 30px;
}
Eingang{
Position: absolut;
Top: 10px;
links: 10px;
Polsterung: 3px;
Cursor: Zeiger;
}
</style>
HTML -Code
Die Codekopie lautet wie folgt:
<body>
<Eingabe type = "Taste" value = "Return in der originalen Weise"/>
<div> </div>
</body>
JavaScript -Code
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
// 1. Klicken Sie zunächst mit der Maus als Abzug auf die DIV.
// 2. Lösen Sie beim Klicken auf die Maus, um das Mausbewegungsereignis auszulösen, um Daten in das Array zu injizieren (Koordinaten verschieben).
// 3. Enden mit der Maus, die sich von der Div weg bewegt als
// 4. Klicken Sie auf die Schaltfläche "Originalrückgabe", um das Array (Moving Coordinaten) zu durchqueren und die Koordinatenbewegung von Div im Array auszulösen, um die Funktion "Rückgabe" zu erreichen.
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 || Fenster.Event;
// Holen Sie sich die Koordinaten der Maus im Div
var disx = event.clientX-odiv.offsetleft;
var disy = event.clienty-odiv.offsettop;
Arrtop = [60];
arrleft = [30];
document.onmousemove = function (ev) {
var event = ev || Fenster.Event;
// Holen Sie sich die Maussposition nach dem Ziehen
var l = event.clientX;
var t = event.clienty;
// Speichern Sie die gedrückte Position in das Array und verwenden Sie die gezogene Mausposition, um die Mausposition auf dem Objekt abzuziehen, das die gezogene Objektposition ist.
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 zurückgeben;
}
// Der Kern der ursprünglichen Rendite besteht darin, die Koordinaten beim Verschieben aufzuzeichnen, dann das Array neu zu ordnen und dem Objekt einen Timer so einzustellen, dass es im Array breite Werte zuordnet.
obtn.onclick = function () {
Arrtop.Reverse (); // neu
arrleft.reverse (); // neu
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>