Detaillierte Erläuterung der Methode zur Realisierung der Bewegung mehrerer Objekte in JS-js-Tutorial-php.cn

Detaillierte Erläuterung der Methode zur Realisierung der Bewegung mehrerer Objekte in JS

韦小宝

Freigeben： 2018-01-24 09:55:49

Original

1087 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Methode zur Realisierung von Mehrobjektbewegungen in JS vorgestellt und das Prinzip und die damit verbundenen Betriebsfähigkeiten von Javascript bei der Realisierung von Mehrobjektbewegungen im Detail anhand von Beispielen analysiert Wenn Sie sich für JavaScript interessieren, lesen Sie bitte diesen Artikel

In diesem Artikel wird die Methode zur Realisierung der Bewegung mehrerer Objekte in JS anhand von Beispielen analysiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Grundlegende Schritte

1 Holen Sie sich das, was Sie tun möchten getElementsByTagNameElemente für die Bewegung mehrerer Objekte
2. Dann durchläuft die for-Schleife die Elemente und fügt Ereignisse hinzu
3. Definieren Sie die Funktion startMove, die zwei Parameter erfordert, das aktuelle „bewegte“ Element und das Zielwertziel

Achtung: Bei der Bewegung mehrerer Objekte kann nicht alles geteilt werden

<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

Problem:

Wenn die Ein- und Ausfahrgeschwindigkeit relativ hoch ist, kehren einige Lis nicht in ihren ursprünglichen Zustand zurück und bleiben in der Mitte stecken. Das liegt daran, dass alle Lis einen gemeinsamen Timer haben

Wenn sich die Maus in den ersten Li bewegt, rufen Sie startMove auf, um einen Timer zu starten. Wenn die Maus den Li entfernt, muss auch ein Timer gestartet werden, um den Li in seine ursprüngliche Position zurückzubringen , wir bewegen uns in die zweite li, der Timer wird zuerst gelöscht und dann bleibt die 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

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

Nach dem Login kopieren

Dann ist der in starMove jedes Mal verwendete Timer 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:

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

Nach dem Login kopieren

Fügen Sie etwas Stil hinzu:

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

Nach dem Login kopieren

Vollständiger js-Code

<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

Dann schauen wir mal an einem Beispiel: Mehr Objektbewegung – Transparenz ändern

<script>
  window.onload = function () {
    var aImgs = document.getElementsByTagName(&#39;img&#39;);
    for(var i=0;i<aImgs.length;i++){
      aImgs[i].timer = null;
      aImgs[i].alpha = 100; // 把公用的alpha改成每个img对象都有的属性
      aImgs[i].onmouseover = function () {
        startMove(this,30);
      }
      aImgs[i].onmouseout = function () {
        startMove(this,100);
      }
    }
  }
  // var alpha = 100; 这里alpha在多物体运动里 不能公用
  function startMove(obj,iTarget) {
    clearInterval(obj.timer);
    var iSpeed = (iTarget - obj.alpha)/10;
      iSpeed = iSpeed>0 ? Math.ceil(iSpeed): Math.floor(iSpeed);
    obj.timer = setInterval(function(){
      if(obj.alpha == iTarget){
        clearInterval(obj.timer);
      }else{
        obj.alpha += iSpeed;
        obj.style.opacity =obj.alpha/100;
        obj.style.filter = &#39;alpha(opacity:&#39;+obj.alpha+&#39;)&#39;;
      }
    },30);
  }
</script>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein, die JavaScript lernen! !

Verwandte Empfehlungen:

JavaScript-Implementierung zum Hinzufügen und Löschen von Elementen zum Auswahl-Dropdown-Feld, Beispielfreigabe

Binäre Suche mit Javascript-Algorithmus Baum Der Beispielcode

spricht von der längsten gemeinsamen Teilsequenz in JavaScript

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Methode zur Realisierung der Bewegung mehrerer Objekte in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!