So implementieren Sie den automatischen Scrolleffekt des versteckten Auswahlrahmens, wenn der Text in Vue zu lang ist

In den letzten Jahren sind mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie unzählige neue und praktische Spezialeffekte entstanden. Darunter ist ein spezieller Text-Scroll-Effekt, der auch als automatisches Scrollen bekannt ist und sich nach und nach zu einer der gängigen Funktionen in vielen Websites und Anwendungen entwickelt.

Vue.js ist eine sehr beliebte Wahl unter Front-End-Frameworks. In diesem Artikel erfahren Sie, wie Sie in Vue den automatischen Scrolleffekt erzielen, bei dem der Text ausgeblendet wird, wenn der Text zu lang ist.

1. Grundprinzip

Das Prinzip des Marquee-Effekts ist sehr einfach: Platzieren Sie den Text in einem festen Container. Wenn die Länge des Texts die Längenbeschränkung des Containers überschreitet, wird der Textcontainer in den Positionierungsmodus versetzt Der Text wird durch Animation animiert und bewegt sich nach links, um einen Marquee-Effekt zu erzielen.

Beim Realisieren des Marquee-Effekts müssen wir Folgendes tun:

1. Steuern Sie die Höhe und Breite des Textcontainers über CSS, um einen einheitlichen und schönen Stil zu gewährleisten.
2. Setzen Sie das Attribut „Overflow Hidden“ des Textcontainers, um Text zu verhindern vor dem Überlaufen;
3. Umhüllen Sie eine Ebene mit Elementen, die den Text umschließen, und sorgen Sie dafür, dass sich seine Position durch Animation ändert, um den Effekt des automatischen Scrollens von Text zu erzielen.

Zweitens: Definieren Sie zunächst zwei Container in HTML bzw. Ein Container zum Anzeigen von Text und ein Container zum Umbrechen von Text.

<div class="scroll-container">
  <div class="text-container">
    这是需要被滚动的内容
  </div>
</div>

Nach dem Login kopieren
1. Stellen Sie dann den Textcontainer in CSS auf absolute Positionierung ein und legen Sie die ausgeblendeten Eigenschaften für Breite, Höhe und Überlauf fest.

.scroll-container {
  position: relative;
  height: 50px;
  overflow: hidden;
}

.text-container {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}

Nach dem Login kopieren
2. Im CSS oben stellen wir den Textcontainer so ein, dass er absolut positioniert ist, und positionieren ihn in der oberen linken Ecke des übergeordneten Containers. Gleichzeitig ist die Breite des Textcontainers auf 100 % eingestellt, die Höhe beträgt 50 Pixel und das Überlaufattribut ist auf „versteckt“ festgelegt. Dies bedeutet, dass der überschüssige Teil vorhanden ist, wenn der Inhalt im Container zu lang ist verborgen sein.

Als nächstes müssen wir vue.js verwenden, um Animationseffekte zu erzielen. In der Vue.js-Vorlage fügen wir dem Container, der den Text umschließt, ein „Übergangs“-Attribut hinzu und setzen den Animationseffekt von „links“ auf „-100 %“.

<template>
  <div class="scroll-container">
    <div class="text-container" :style="{left: position + &#39;%&#39;}">
      这是需要被滚动的内容
    </div>
  </div>
</template>

<style>
.scroll-container {
  position: relative;
  height: 50px;
  overflow: hidden;
}

.text-container {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  transition: left 5s linear;
}
</style>

<script>
export default {
  data () {
    return {
      position: 0
    }
  },
  mounted () {
    setInterval(() => {
      this.position -= 100;
      if (this.position < -100) {
        this.position = 0;
      }
    }, 5000)
  }
}
</script>

Nach dem Login kopieren
3. Im obigen Code verwenden wir vue.js, um Animationseffekte zu erzielen. Durch den SetInterval-Timer wird der Attributwert „Position“ alle 5 Sekunden um 100 subtrahiert, um den Effekt des automatischen Textscrollens zu erzielen. Wenn gleichzeitig die Laufschrift ganz nach links gescrollt wird, wird der Attributwert „Position“ auf 0 zurückgesetzt, wodurch die Endlosschleifen-Scrollfunktion des Textes realisiert wird.

3. Zusammenfassung

Der automatische Scroll-Effekt, bei dem der Ticker ausgeblendet wird, wenn der Text zu lang ist, ist in heutigen Websites und Anwendungen immer häufiger anzutreffen. Durch die Implementierung des Vue.js-Frameworks können wir diese Funktion nicht nur schnell und bequem implementieren, sondern den Benutzern auch den Textinhalt auf der Webseite in einer schönen und reibungslosen Form präsentieren. Ich hoffe, dass dieser Artikel hilfreich sein wird, um mithilfe von Vue den automatischen Scrolleffekt zu erzielen, bei dem der Text ausgeblendet wird, wenn der Text zu lang ist.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den automatischen Scrolleffekt des versteckten Auswahlrahmens, wenn der Text in Vue zu lang ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!