So implementieren Sie die Bewegung mehrerer Objekte in JS (ausführliches Tutorial)-js-Tutorial-php.cn

So implementieren Sie die Bewegung mehrerer Objekte in JS (ausführliches Tutorial)

亚连

Freigeben： 2018-06-09 17:32:56

Original

1330 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Methode zur Realisierung von Multi-Objekt-Bewegungen in JS vor. Er analysiert die Prinzipien und zugehörigen Operationstechniken von Javascript bei der Realisierung von Multi-Objekt-Bewegungen im Detail in Form von Beispielen

Das Beispiel analysiert die Methode zur Realisierung von Mehrobjektbewegungen in JS. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Grundlegende Schritte

1. Holen Sie sich die Elemente für die Bewegung mehrerer Objekte durch getElementsByTagName
2. Dann durchläuft die for-Schleife die Elemente und fügt Ereignisse hinzu
3. Definieren Sie die startMove-Funktion, die zwei Parameter erfordert, das aktuelle Element „Übung durchführen“ und den Zielwert target

Hinweis: Bei der Bewegung mit mehreren Objekten kann nicht alles geteilt werden

Problem:

Beim Bewegen Die Ein- und Ausfahrgeschwindigkeit ist relativ hoch, es scheint, dass einige Li nicht in ihren ursprünglichen Zustand zurückkehren können und in der Mitte stecken bleiben.

Wenn die Die Maus bewegt sich in die erste Position. Wenn ein Li erreicht ist, rufen Sie startMove auf, um einen Timer zu starten. Wenn die Maus das Li entfernt, muss auch ein Timer gestartet werden, um das Li in seine ursprüngliche Position zurückzubringen der zweite Li, und der Timer wird zuerst gelöscht. Zu diesem Zeitpunkt blieb der erste Li auf halbem Weg stecken.

Lösen Sie dieses Problem:

Lassen Sie jedes Li seinen eigenen Timer haben, um seine Änderungen zu steuern, und definieren Sie jedes Li während der for-Schleife. Einen Ihrer eigenen Timer

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName(&#39;li&#39;); // 第一步
      for(var i=0;i<liTags.length;i++){ // 第二步
         liTags[i].onmouseover = function () {
         startMove(this,400);
         }
         liTags[i].onmouseout = function () {
         startMove(this,200);
         }
      }
    }
    var timer = null;
    function startMove(obj,iTarget) { // 第三步，2个参数
      clearInterval(timer);
      timer = setInterval(function () {
        var iSpeed = (iTarget - obj.offsetWidth)/10;
        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);// 缓冲运动注意取整处理
        if(obj.offsetWidth == iTarget){
          clearInterval(timer);
        }else{
          obj.style.width = obj.offsetWidth+iSpeed+&#39;px&#39;;
        }
      },30);
    }
</script>

Nach dem Login kopieren

Dann ist der Timer, der jedes Mal in starMove verwendet wird, der aktuelle eigene, sodass es zu keiner gegenseitigen Beeinträchtigung kommt.

Der vorherige Timer hier wurde in

geändert (der eigene Timer des aktuellen Objekts); hier gibt es kein Problem.

obj.timer Der vollständige Code lautet wie folgt:

liTags[i].timer = null;// 给每个li都添加一个timer

Nach dem Login kopieren

Punktstil hinzufügen:

<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>

Nach dem Login kopieren

Vollständiger js-Code

<style>
    ul{list-style: none;}
    ul li{
      margin: 10px;
      width: 200px;height: 50px;
      background: lightblue;
    }
</style>

Nach dem Login kopieren

Dann schauen wir uns ein Beispiel an: multi- Objektbewegung-verändernde Transparenz

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName(&#39;li&#39;);
      for(var i=0;i<liTags.length;i++){
         liTags[i].timer = null;// 给每个li都添加一个timer
         liTags[i].onmouseover = function () {
         startMove(this,400);
         }
         liTags[i].onmouseout = function () {
         startMove(this,200);
         }
      }
    }
    function startMove(obj,iTarget) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        var iSpeed = (iTarget - obj.offsetWidth)/10;
        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
        if(obj.offsetWidth == iTarget){
          clearInterval(obj.timer);
        }else{
          obj.style.width = obj.offsetWidth+iSpeed+&#39;px&#39;;
        }
      },30);
    }
</script>

Nach dem Login kopieren

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Welche Methoden gibt es, um der Erkennungssequenz in Vue neue Attribute von Objekten hinzuzufügen?

Wie erreicht man in jQuery den Animationseffekt des Abprallens von der Kante?

So verwenden Sie sass im Vue CLI Webpack (ausführliche Anleitung)

So ändern Sie den P-Tag-Textwert in jQuery

Durch das Erstellen von Tags in js Dynamics und das Festlegen von Attributmethoden (ausführliches Tutorial)

Implementierung der Methoden zum Hinzufügen und Zuweisen von Tag-Unterelementen in jQuery

Wie implementiert man häufig verwendete Meldungsfelder in JS?

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Bewegung mehrerer Objekte in JS (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!