Teilen Sie Beispiele für die Bewegung mehrerer Objekte mithilfe von JS-js-Tutorial-php.cn

Teilen Sie Beispiele für die Bewegung mehrerer Objekte mithilfe von JS

小云云

Freigeben： 2018-01-24 09:02:11

Original

1303 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Methode von JS zur Realisierung von Multi-Objekt-Bewegungen vor. Er analysiert die Prinzipien und zugehörigen Operationstechniken von Javascript zur Realisierung von Multi-Objekt-Bewegungen im Detail in Form von Beispielen. Ich hoffe, es kann allen helfen.

Grundlegende Schritte

1. Erhalten Sie die Elemente, die von mehreren Objekten verschoben werden sollen
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 „bewegte“ Element und den 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

Problem:

Wenn die Ein- und Ausfahrgeschwindigkeit relativ hoch ist, scheint es, dass einige Li nicht in ihren ursprünglichen Zustand zurückkehren können und in der Mitte stecken bleiben <; 🎜>Wenn sich die Maus in die erste Position bewegt, rufen Sie startMove auf, um einen Timer zu starten. Wenn die Maus li entfernt, müssen Sie auch einen Timer starten, um li in seine ursprüngliche Position zurückzubringen. Wenn li die Hälfte erreicht, bewegen wir uns in die zweite Position 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

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

Stil 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 Sie sich ein Beispiel an: Bewegung mehrerer Objekte – Transparenz ändern

<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

Verwandte Empfehlungen:

<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

Analyse der Methoden zur Implementierung von JavaScript-Multiobjektbewegungen_Javascript-Fähigkeiten

Erläuterung von Beispielen für gleichmäßige Bewegung basierend auf js

Zwei JS-Methoden zur Realisierung der parabolischen Flugbahnbewegung einer kleinen Kugel

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für die Bewegung mehrerer Objekte mithilfe von JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!