Der Kapselungsprozess des JS Motion Framework (Beispielcode

Lassen Sie mich eine Frage stellen. Der Weg vom Startpunkt A zum Ziel B hat insgesamt 1000 Millisekunden gedauert. Welche Informationen haben Sie daraus erhalten?

Welche Informationen gibt es?

Der erste, die Gesamtdauer beträgt: 1000 Millisekunden

Der zweite, wie oft braucht man zum Gehen? 30 Millisekunden

Drittens, Gesamtzahl der Spaziergänge: 1000/30

Viertens, Distanz: B-A

Fünftens, Schrittlänge: Distanz/Gesamtanzahl der Male

Die Umsetzungsidee des Bewegungsframeworks besteht darin, innerhalb eines bestimmten Zeitraums nach links, oben, in der Breite und in der Höhe zu wechseln und nach Erreichen des Ziels anzuhalten.

Sie können zuerst darüber nachdenken, wie man das Div auf der Seite bewegt?

Denken Sie wie folgt: 1. Beim Festlegen des Div wird es absolut positioniert, da erst nach der absoluten Positionierung die linken, oberen und anderen Werte auf der Seite angezeigt werden. Andernfalls ist das Div auf der Seite nicht sichtbar.

2. Sie können ein Klickereignis für das Div festlegen und in der Funktion die Gesamtzahl der Schritte, die Gesamtentfernung dis und die Geschwindigkeit definieren Aktuelle Anzahl der Schritte und initialisieren Sie sie mit n =0

3. Verwenden Sie dann den Timer setInterval(), um die aktuelle Entfernung des Divs abzurufen und es bewegen zu lassen.

Der spezifische Code lautet wie folgt: GetElementById ('Div1'); >

                    var step = dis/count;

//

                             var n = 0; //
Die aktuelle Anzahl der Schritte n++;
                                         oDiv.style.left = n* Schritt + 'px';
                                                                                                                                                                   Der Code div wird sich bewegen. Aber das Div stoppt nicht und bewegt sich weiter. Das liegt daran, dass für es keine Bewegungsbeendigungsbedingung festgelegt ist. Im obigen Code haben wir die aktuelle Anzahl der Schritte und die Gesamtzahl der Schritte festgelegt. Wenn die aktuelle Anzahl der Schritte und die Gesamtzahl der Schritte konsistent sind und dann den Timer gelöscht werden, kann der Div gestoppt werden?
Wenn die Anzahl der Schritte 500 erreicht, stoppt die Div bei 500. Der verbesserte Code lautet wie folgt:
window.onload = function(){
var oDiv = document.getElementById(' div1 ');

var timer;

oDiv.onclick = function(){ var count = parseInt(1000/30);
//Gesamtzahl der durchgeführten Schritte


var dis = 500-0;

//Entfernung

var step = dis/count;

//Geschwindigkeit

var n = 0;

//Aktuelle Anzahl der Schritte

timer = setInterval(function(){ n++;

oDiv. style .left = n*step +'px';

                                                                                                                                                                                                                    (timer)                         }; >

Spannender Inhalt, der fortgesetzt wird...

Das obige ist der detaillierte Inhalt vonDer Kapselungsprozess des JS Motion Framework (Beispielcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!