Eine kurze Diskussion darüber, wie Javascript einheitliche Motion_Javascript-Fähigkeiten erreicht

Sport in Javascript wird häufig auf Websites verwendet. Dieses Mal möchte ich Ihnen einige grundlegende Bewegungsanwendungen vorstellen. Es ist für jeden bequem, es direkt während der Entwicklung zu verwenden.

Der Code ist einfach und leicht zu verstehen und für Anfänger geeignet. Abschließend werde ich Schritt für Schritt mein eigenes Bewegungsgerüst klären.

Anwendungsfalldarstellungen:

Bewegen Sie die Maus über die Freigabe und das Div auf der linken Seite wird angezeigt. Es stellt sich selbst wieder her, wenn Sie es entfernen. Ich glaube, dass jeder dies nutzen wird. Schauen wir uns an, wie der Code implementiert wird.

Code kopieren Der Code lautet wie folgt: #div1 { Breite: 150 Pixel; Höhe : 200px; Hintergrund: grün; Position: absolut; links: -150px; } #div1 span { Position: absolut; Breite: 20 Pixel; Höhe: 60px; Zeilenhöhe: 20 Pixel; Hintergrund: blau; rechts: -20px; oben: 70px; }

Code kopieren Der Code lautet wie folgt: Teilen mit

Das Folgende ist der Javascript-Code

Code kopieren

Der Code lautet wie folgt: window.onload=function(){ var oDiv=document.getElementById("div1"); oDiv.onmouseover=function(){ startMove(0); }; oDiv.onmouseout=function(){ startMove(-150); }; } var time=null; Funktion startMove(iTraget){ var oDiv=document.getElementById("div1"); clearInterval(time); time=setInterval(function(){ var speed=0; if(oDiv.offsetLeft>iTraget){ Geschwindigkeit=-10; }else{ Geschwindigkeit=10; } if(oDiv.offsetLeft==iTraget){ clearInterval(time); }else{ oDiv.style.left=oDiv.offsetLeft speed 'px'; } },30); } Dinge:

Der anfängliche Rest im Stil ist -150, sodass das Div nach innen verkleinert wird. Wenn es 0 ist, wird es angezeigt. Dann müssen wir nur noch diesen Wert ändern

Der Parameter iTarget in startMove ist der Zielpunkt und gibt an, an welchem Zielpunkt angehalten wird.

Kontrollieren Sie die Größe der Geschwindigkeit, um die Bewegungsgeschwindigkeit zu steuern. Wenn der Zielpunkt erreicht ist, stoppen Sie den Timer.

Regel:

* Annahme

* left:30 iTarget:300 Es stellt sich heraus, dass es positiv ist, nach rechts zu gehen * left:600 iTarget:50 Es stellt sich heraus, dass das Gehen nach links negativ ist * * Ermitteln Sie die positive und negative Geschwindigkeit anhand der Beziehung zwischen der aktuellen Position links und dem Zielpunkt iTarget

Hinweis: Sie müssen den Timer zu Beginn ausschalten, da jedes Mal, wenn Sie zum Teilen wechseln, ein Timer aktiviert wird. Je mehr Sie ihn einschalten, desto schneller geht es, da mehrere Timer gleichzeitig ausgeführt werden.

Stellen Sie also sicher, dass jedes Mal ein Timer funktioniert.

Befolgen Sie den Grundsatz: Die Funktionsfunktionen sind gleich. Je weniger Parameter, desto besser. Daher wird die Geschwindigkeit gemäß den oben genannten Regeln nicht als Parameter übergeben.

Um Ihnen ein Beispiel aus dem Leben zu geben: Wenn Sie ein Taxi nehmen, ist es im Allgemeinen unmöglich, dem Taxifahrer bei einer Geschwindigkeit von 100 Metern zu sagen, wohin Sie fahren. Wenn Sie ein Taxi nehmen, können Sie dem Fahrer nicht sagen, wie schnell Sie fahren möchten

Das Programm ist also das gleiche, hier wird der Geschwindigkeitsparameter entfernt.

Natürlich birgt der aktuelle Sportrahmen noch viele Probleme, die in Zukunft gelöst werden müssen. Im nächsten Artikel werden wir besprechen, wie man eine gleichförmige Bewegung stoppen kann.