suchen

Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie die Bewegung mehrerer Objekte in JS (ausführliches Tutorial)

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

亚连
亚连Original
2018-06-09 17:32:561378Durchsuche

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

Punktstil hinzufügen: 

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

Vollständiger js-Code

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

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>

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!

JavaScript jquery sass webpack for 循环 JS 对象 事件 li
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：So konfigurieren Sie die Konfiguration in Vue (ausführliches Tutorial)Nächster Artikel：So konfigurieren Sie die Konfiguration in Vue (ausführliches Tutorial)

In Verbindung stehende Artikel

Mehr sehen