So implementieren Sie Multi-Objekt-Bewegung in JS-js-Tutorial-php.cn

So implementieren Sie Multi-Objekt-Bewegung in JS

php中世界最好的语言

Freigeben： 2018-04-13 10:52:39

Original

1455 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Implementierungsmethode der JS-Multiobjektbewegung vorstellen. Was sind die Vorsichtsmaßnahmen für die Implementierung der JS-Multiobjektbewegung? sehen.

Grundlegende Schritte

1. Erhalten Sie die Elemente, die von mehreren Objekten verschoben werden sollen, über getElementsByTagName 2. Dann durchläuft die for-Schleife die Elemente und fügt Ereignisse hinzu
3. Definieren Sie die startMove-Funktion, die derzeit zwei Parameter erfordert „ “-Element und der Zielwert target

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

Frage:

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.

Wenn sich die Maus in den ersten Li bewegt, wird startMove aufgerufen, 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 zweiter Li. Erster Der Timer wird gelöscht und zu diesem Zeitpunkt bleibt der erste Li auf halbem Weg stecken.

So implementieren Sie Multi-Objekt-Bewegung in JS

Lösen Sie dieses Problem:

Lassen Sie jedes Li seinen eigenen Timer haben, um seine Änderungen zu steuern. Definieren Sie während der for-Schleife einen Timer für jedes Li

Dann ist der in starMove jedes Mal verwendete Timer der des aktuellen Li, sodass es zu keiner gegenseitigen Beeinträchtigung kommt.

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

Nach dem Login kopieren

Der vorherige Timer wurde hier in

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

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

Punktstil hinzufügen:

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

Schauen wir uns als nächstes ein Beispiel an: Multi-Objekt-Bewegung – Änderung der 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 glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln Artikel auf der chinesischen PHP-Website!

<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

Empfohlene Lektüre:

Wie man mit der Rendering-Seite ohne Reflexion umgeht, wenn das Vue-Routing im Verlaufsmodus aktualisiert wird

vue . Detaillierte Erklärung der Schritte zum Erzielen eines nahtlosen Scrolleffekts mit js

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Multi-Objekt-Bewegung in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!