Vue realisiert den Gleitkreuzeffekt des Balles

<Vorlage>
  <div Klasse="Über">
    <div Klasse="Box">
      <!-- Standardzeile -->
      <div Klasse="Zeile"></div>
      <!-- Blaue Linie -->
      <div class="slider-Line" ref="slider-Line"></div>
      <!-- Kleine Kugel links -->
      <div Klasse="ball" @touchstart.prevent="fnstart"></div>
      <!-- Richtiger Ball-->
      <div Klasse="ball ac" @touchstart.prevent="fnstart"></div>
      <!-- Zahlen oben -->
      <div class="num" ref="num">{{ num }}</div>
    </div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      Zahl: 0,
    };
  },
  Methoden: {
    fnstart(ev) {
      //Ball dies.oDiv = ev.target;
      // pagx: der Abstand von der Mausklickposition zur äußersten linken Seite der Seite offsetLeft die linke Seite des aktuellen Elements zur äußersten linken Seite des größten Felds this.pageX = ev.changedTouches[0].pageX - this.oDiv.offsetLeft;
 
      Dokument.ontouchmove = diese.FnMove;
      Dokument.ontouchend = this.FnEnd;
      //Breite des übergeordneten Elements this.parent = ev.target.parentNode.offsetWidth;
      // Subtrahieren Sie die Breite des Balls. this.Width = this.parent - ev.target.offsetWidth;
      //Holen Sie sich das übergeordnete Element this.parents = ev.target.parentNode;
      //Unterelemente abrufen this.child = this.parents.children;
 
      // Hol den Ball nach rechts this.Right = this.parents.children[0];
      // Der Ball auf der linken Seite this.Left = this.parents.children[1];
    },
    FnMove(ev) {
      // Subtrahieren Sie die Distanz, die der Ball von der äußersten linken Seite des Elements gleitet, um den Rand des Browsers zu berechnen. this.X = ev.changedTouches[0].pageX - this.pageX;
      // konsole.log(this.X, 1010101);
 
      //Überprüfe, ob der Ball Null ist und nicht rausgehen kann, if (this.X <= 0) {
        dies.X = 0;
      }
      //Überprüfen Sie, ob es größer oder gleich ist, um zu verhindern, dass der Ball hinausgeht, wenn (this.X > this.Width) {
        dies.X = diese.Breite;
      }
      // Lassen Sie den Ball links gleiten und die Linie ändert entsprechend ihre Farbe // Der obige Wert ändert sich entsprechend und wird in 100 Teile geteilt this.xnum = this.X / 3.7;
      // Ganzzahl abrufen this.num = parseInt(this.xnum);
      dies.$refs["num"].style.left = dies.X + 6 + "px";
 
 
      // Lass die Bälle sich kreuzen, ohne dass sie sich gegenseitig beeinflussen // Überwache dynamisch links und rechts auf (var i = 0; i < this.child.length; i++) {
        wenn (dieses.Kind[i].classList.contains("Ball")) {
          // Insgesamt 5 Elemente minus 3 ist die Länge der blauen Linie
          sei Len = dieses.Kind.Länge - 3;
          wenn (i == Len) {
            // Der Absolutwert der linken Kugel minus der rechten Kugel ist die Breite der Linie this.dis = Math.abs( this.child[i].offsetLeft - this.child[i + 1].offsetLeft );
            //Die Breite des Balls this.child[1].style.width = this.dis + "px";
 
            // Wenn der Wert des linken Balls minus des rechten Balls kleiner als 0 ist, ist der linke Teil der blauen Linie der OffsetLeft-Wert des linken Balls, wenn (this.child[i].offsetLeft - this.child[i + 1].offsetLeft < 0) {
              dieses.Kind[1].style.left = dieses.Kind[i].offsetLeft + "px";
            } anders {
              // Andernfalls ist es der OffsetLeft-Wert des Balls auf der rechten Seite this.child[1].style.left = this.child[i + 1].offsetLeft + "px";
            }
          }
        }
      }
 
 
      dies.oDiv.style.left = dies.X + "px";
    },
    FnEnd() {
      Dokument.ontouchmove = null;
      document.ontouchend = null;
    },
  },
};
</Skript>

<style lang="less" scoped>
.Kasten {
  Position: relativ;
  Breite: 400px;
  Höhe: 30px;
  Hintergrundfarbe: rgb(240, 16, 83);
  oben: 50px;
  Rand: automatisch;
  .ball {
    Position: absolut;
    Breite: 30px;
    Höhe: 30px;
    Hintergrundfarbe: rosa;
    Randradius: 50 %;
    Z-Index: 2;
  }
  .ball.ac {
    rechts: 0;
    Hintergrundfarbe: lila;
  }
  .Linie {
    Position: absolut;
    oben: 14px;
    Breite: 400px;
    Höhe: 2px;
    Zeilenhöhe: 30px;
    Hintergrund: #ccc;
  }
  .slider-Linie {
    Position: absolut;
    oben: 14px;
    Breite: 400px;
    Höhe: 2px;
    Zeilenhöhe: 30px;
    Hintergrundfarbe: blau;
  }
  .Nummer {
    Position: absolut;
    oben: -19px;
    links: 9px;
  }
}
</Stil>