suchen

Heim  >  Artikel  >  Web-Frontend  >  Zusammenfassung der Wissenspunkte im Zusammenhang mit JS-Bewegung (mit Beispielen für elastische Bewegung)_Javascript-Fähigkeiten

Zusammenfassung der Wissenspunkte im Zusammenhang mit JS-Bewegung (mit Beispielen für elastische Bewegung)_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:21:131305Durchsuche

Dieser Artikel fasst die Wissenspunkte zum JS-Sport zusammen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1. Alles im Multi-Objekt-Bewegungsrahmen kann nicht geteilt werden

2.document.title-Ausgabefrequenz darf nicht zu hoch sein

3. Vermeiden Sie beim Schreiben von JS das Schreiben von Dezimalzahlen, da das Innere des Computers simuliert und nicht tatsächlich gespeichert wird

Zum Beispiel: 0,07*100 ist im JS-Betrieb nicht 7

var a=3;
var b=3.00000000000000000001;
alert(a=b);

Das Ausgabeergebnis ist wahr

4. Denken Sie beim Schreiben eines Programms zuerst an das Allgemeine und dann an das Besondere. Wenn Sie ein Programm schreiben, eliminieren Sie zuerst das Besondere und schreiben Sie dann das Allgemeine 

if(特殊1)
{}
else if(特殊2)
{}
else
{
 一般
}
5. Für Arrays können Sie entweder eine for-Schleife oder eine for..in-Schleife verwenden. Da die for-Schleife besser kontrollierbar ist, ist es besser, eine for-Schleife zu verwenden

Für Objekte (JSON) können Sie nur die for..in-Schleife verwenden

6. Die Leistung beim Schreiben von *{margin:0;padding:0;} in CSS ist nicht sehr gut

7. Legen Sie bei der Layoutkonvertierung zunächst die linken und oberen Werte für jedes Element fest, legen Sie dann die absoluten Werte für die Position jedes Elements fest und löschen Sie den Rand

8. Wenn Sie UL zum Training in IE7 verwenden, können Sie es jetzt mit DIV versuchen

9. Berücksichtigen Sie den Reibungsfaktor iSpeed*0,95 (die Größe der Dezimalstelle hängt von der Größe der Reibung ab)

10. Beschleunigung, je weiter vom Ziel entfernt, desto größer die Beschleunigung und je näher am Ziel, desto kleiner ist sie (iTarget-obj.offsetLeft)/50

11. Eine bessere Kombination aus Beschleunigung und Reibung ist 5 und 0,7, d. h. iSpeed ​​​​= (iTarget-obj.offsetLeft)/5; iSpeed*=0,7;

12. Wenn es ein Problem mit dem Programm gibt, denken Sie darüber nach, warum das Problem aufgetreten ist

13. Die elastische Bewegung kann nicht verwendet werden, wenn der Stil die Grenze nicht überschreiten kann

14. Bedingungen zum Stoppen elastischer Bewegungen: Abstand zu gering und Geschwindigkeit zu gering

15. Die Analyse muss sorgfältig durchgeführt werden, da der Stil Dezimalstellen automatisch ignoriert. Um zu verhindern, dass sich die fehlenden Dezimalstellen summieren, können Sie eine Variable zum Speichern festlegen und diese dann dem Stil zuweisen. obj.style.left=left "px";

Anhang: Beispiel für eine elastische JavaScript-Bewegung

Bewegungsprinzip: Beschleunigungsbewegung, Verzögerungsbewegung, Reibungsbewegung;

Der Code lautet wie folgt: 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}
</style>
<script>
window.onload = function()
{
 var oBtn = document.getElementById('btn1');
 var oDiv = document.getElementById('div1');
 oBtn.onclick = function()
 {
  startMove(oDiv, 300);
 };
};
var iSpeed = 0;
var left = 0;
function startMove(obj, iTarget)
{
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
  iSpeed += (iTarget - obj.offsetLeft)/5;
  iSpeed *= 0.7;
  left += iSpeed;
  if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){
   clearInterval(obj.timer);
   obj.style.left = iTarget + 'px';
  }else{
   obj.style.left = obj.offsetLeft + iSpeed + 'px';
  }
 }, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="运动" />
<div id="div1"></div>
<div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; ">
</div>
</body>
</html>
Weitere Inhalte zu JavaScript-Bewegungseffekten finden Sie im Sonderthema auf dieser Website: „
Zusammenfassung der JavaScript-Bewegungseffekte und -Techniken

“ Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Basierend auf JavaScript-Code zur Implementierung der Einstellung als Startseite und zum Hinzufügen zu Favoriten, kompatibel mit verschiedenen Browsern_Javascript-KenntnissenNächster Artikel：Basierend auf JavaScript-Code zur Implementierung der Einstellung als Startseite und zum Hinzufügen zu Favoriten, kompatibel mit verschiedenen Browsern_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen