Comment obtenir l'effet de masquer le défilement automatique du chapiteau lorsque le texte est trop long dans Vue

Ces dernières années, avec le développement continu de la technologie frontale, divers effets spéciaux nouveaux et pratiques sont apparus à l'infini. Parmi eux, un effet spécial de défilement de texte - le chapiteau, également connu sous le nom de défilement automatique, devient progressivement l'une des fonctions courantes dans de nombreux sites Web et applications.

Vue.js est un choix très populaire parmi les frameworks front-end. Cet article explique comment obtenir l'effet de défilement automatique consistant à masquer le rectangle de sélection lorsque le texte est trop long dans Vue.

1. Principe de base

Le principe de l'effet de sélection est très simple : placez le texte dans un conteneur fixe lorsque la longueur du texte dépasse la limite de longueur du conteneur, le conteneur de texte est mis en mode positionnement, et le texte est animé par animation. Arrêtez-vous et déplacez-vous vers la gauche pour obtenir un effet de chapiteau.

Lors de la réalisation de l'effet de sélection, nous devons procéder comme suit :

1. Contrôler la hauteur et la largeur du conteneur de texte via CSS pour garantir des styles uniformes et beaux
2. Définir l'attribut caché de débordement du conteneur de texte pour empêcher le texte ; du débordement ;
3. Envelopper une couche d'éléments qui enveloppent le texte et maintenir sa position changeante grâce à l'animation, de manière à obtenir l'effet de défilement automatique du texte

Deuxième implémentation spécifique

1. Définissez d'abord deux conteneurs en HTML ; , respectivement Un conteneur pour afficher le texte et un conteneur pour envelopper le texte.

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

2. Ensuite, définissez le conteneur de texte sur un positionnement absolu en CSS et définissez les propriétés cachées de largeur, de hauteur et de débordement.

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

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

Dans le CSS ci-dessus, nous définissons le conteneur de texte pour qu'il soit positionné de manière absolue et le positionnons dans le coin supérieur gauche du conteneur parent. Dans le même temps, la largeur du conteneur de texte est définie sur 100 %, la hauteur est de 50 px et l'attribut de débordement est défini sur "caché", ce qui signifie que lorsque le contenu du conteneur est trop long, la partie excédentaire sera se cacher.

3. Ensuite, nous devons utiliser vue.js pour obtenir des effets d'animation. Dans le modèle Vue.js, nous ajoutons un attribut « transition » au conteneur qui enveloppe le texte et définissons l'effet d'animation de « gauche » à « -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>

Dans le code ci-dessus, nous utilisons vue.js pour obtenir des effets d'animation. Grâce à la minuterie setInterval, la valeur de l'attribut « position » est soustraite de 100 toutes les 5 secondes pour obtenir l'effet de défilement automatique du texte. Dans le même temps, lorsque le chapiteau défile vers l'extrême gauche, la valeur de l'attribut « position » est réinitialisée à 0, réalisant la fonction de défilement en boucle infinie du texte.

3. Résumé

L'effet de défilement automatique consistant à masquer le ticker lorsque le texte est trop long est devenu de plus en plus courant sur les sites Web et les applications d'aujourd'hui. Grâce à la mise en œuvre du framework Vue.js, nous pouvons non seulement implémenter cette fonction rapidement et facilement, mais également présenter le contenu textuel de la page Web aux utilisateurs sous une forme belle et fluide. J'espère que cet article sera utile pour utiliser Vue afin d'obtenir l'effet de défilement automatique consistant à masquer le rectangle de sélection lorsque le texte est trop long.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!