Maison interface Web js tutoriel Comment utiliser JavaScript pour obtenir un effet de défilement de texte ?

Comment utiliser JavaScript pour obtenir un effet de défilement de texte ?

Oct 16, 2023 am 08:53 AM
javascript 实现 défilement du texte

如何使用 JavaScript 实现文字滚动效果?

Comment utiliser JavaScript pour obtenir un effet de défilement de texte ?

L'effet de défilement du texte est un effet dynamique courant sur les pages Web. Grâce à l'affichage défilant du texte, il peut attirer l'attention de l'utilisateur et augmenter la vitalité de la page. Ce qui suit présente en détail comment utiliser JavaScript pour obtenir un effet de défilement de texte, avec des exemples de code joints.

  1. Créer une structure HTML

Tout d'abord, créez un conteneur dans la page HTML pour envelopper le texte défilant. Le code est le suivant :

<!DOCTYPE html>
<html>
<head>
    <title>文字滚动效果</title>
</head>
<body>
    <div id="scroll-container">
        <div id="scroll-text">这是一段滚动的文字。</div>
    </div>

    <script src="scroll.js"></script>
</body>
</html>
Copier après la connexion
  1. Écrire des styles CSS

Ensuite, nous devons ajouter des styles au conteneur et au texte pour afficher l'effet de défilement. Le code est le suivant :

#scroll-container {
    overflow: hidden;
    height: 30px;
    width: 200px;
}

#scroll-text {
    white-space: nowrap;
    animation: scroll 5s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(200px);
    }
    100% {
        transform: translateX(-100%);
    }
}
Copier après la connexion

Dans le code ci-dessus, nous définissons une hauteur et une largeur fixes pour le conteneur et utilisons overflow: Hidden pour masquer le texte de débordement. Pour le texte défilant, nous utilisons white-space: nowrap pour interdire le retour à la ligne du texte et définissons une animation nommée scroll pour obtenir l'effet de défilement du texte. overflow: hidden 隐藏溢出的文字。对于滚动的文字,我们使用了 white-space: nowrap 禁止文字换行,并定义了一个名为 scroll 的动画,实现文字的滚动效果。

  1. 编写 JavaScript 代码

最后,我们需要使用 JavaScript 来动态生成滚动文字。我们使用一个计时器,每隔一段时间改变滚动的文字内容。代码如下:

var scrollText = document.getElementById('scroll-text');
var texts = ['这是一段滚动的文字。', '这是第二段滚动的文字。', '这是第三段滚动的文字。'];
var index = 0;

setInterval(function() {
    scrollText.textContent = texts[index];
    index = (index + 1) % texts.length;
}, 3000);
Copier après la connexion

在上述代码中,我们首先获取滚动文字的元素节点 scrollText,然后定义一个数组 texts

    Écrire du code JavaScript

    Enfin, nous devons utiliser JavaScript pour générer dynamiquement du texte défilant. Nous utilisons une minuterie pour modifier le contenu du texte défilant de temps en temps. Le code est le suivant :

    rrreee🎜Dans le code ci-dessus, nous obtenons d'abord le nœud d'élément scrollText du texte défilant, puis définissons un tableau texts pour stocker plusieurs défilements. contenu du texte. Utilisez une minuterie pour modifier le contenu du texte défilant toutes les trois secondes afin d'obtenir l'effet de défilement du texte. 🎜🎜Grâce aux étapes ci-dessus, nous avons terminé le processus d'utilisation de JavaScript pour obtenir l'effet de défilement du texte. Vous pouvez ajuster le style du conteneur et du texte en fonction de vos besoins, et vous pouvez également modifier l'intervalle de temps de la minuterie et le contenu du texte défilant selon vos besoins. 🎜🎜J'espère que les exemples de code ci-dessus vous seront utiles et que vous pourrez réussir à obtenir l'effet de défilement de texte. Je vous souhaite du succès ! 🎜

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment mettre en œuvre la double connexion WeChat sur les téléphones mobiles Huawei ? Comment mettre en œuvre la double connexion WeChat sur les téléphones mobiles Huawei ? Mar 24, 2024 am 11:27 AM

Comment mettre en œuvre la double connexion WeChat sur les téléphones mobiles Huawei ?

Comment implémenter la fonction de clonage WeChat sur les téléphones mobiles Huawei Comment implémenter la fonction de clonage WeChat sur les téléphones mobiles Huawei Mar 24, 2024 pm 06:03 PM

Comment implémenter la fonction de clonage WeChat sur les téléphones mobiles Huawei

Guide de programmation PHP : méthodes pour implémenter la séquence de Fibonacci Guide de programmation PHP : méthodes pour implémenter la séquence de Fibonacci Mar 20, 2024 pm 04:54 PM

Guide de programmation PHP : méthodes pour implémenter la séquence de Fibonacci

Découvrez comment Golang offre des possibilités de développement de jeux Découvrez comment Golang offre des possibilités de développement de jeux Mar 16, 2024 pm 12:57 PM

Découvrez comment Golang offre des possibilités de développement de jeux

Guide de mise en œuvre des exigences du jeu PHP Guide de mise en œuvre des exigences du jeu PHP Mar 11, 2024 am 08:45 AM

Guide de mise en œuvre des exigences du jeu PHP

Comment mettre en œuvre une opération de division exacte dans Golang Comment mettre en œuvre une opération de division exacte dans Golang Feb 20, 2024 pm 10:51 PM

Comment mettre en œuvre une opération de division exacte dans Golang

Explication détaillée de l'utilisation de Golang pour implémenter la fonction d'exportation de données Explication détaillée de l'utilisation de Golang pour implémenter la fonction d'exportation de données Feb 28, 2024 pm 01:42 PM

Explication détaillée de l'utilisation de Golang pour implémenter la fonction d'exportation de données

Utiliser PHP pour implémenter le SaaS : une analyse complète Utiliser PHP pour implémenter le SaaS : une analyse complète Mar 07, 2024 pm 10:18 PM

Utiliser PHP pour implémenter le SaaS : une analyse complète

See all articles