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

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

WBOY

Freigeben： 2016-05-16 15:21:13

Original

1332 Leute haben es durchsucht

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);

Nach dem Login kopieren

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
{
 一般
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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.