suchen

Heim  >  Artikel  >  Web-Frontend  >  Teilen Sie Beispiele für die Bewegung mehrerer Objekte mithilfe von JS

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

小云云
小云云Original
2018-01-24 09:02:111321Durchsuche

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>

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

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>


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


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>


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>

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!

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：Detaillierte Erläuterung der Verwendung von jQuery Ajax (Load, Post, Get, Ajax)Nächster Artikel：Detaillierte Erläuterung der Verwendung von jQuery Ajax (Load, Post, Get, Ajax)

In Verbindung stehende Artikel

Mehr sehen