Texte qui doit défiler" ; l'attribut de la balise marquee est utilisé pour contrôler ce qui se passe lorsque le texte atteint le bord du conteneur."/> Texte qui doit défiler" ; l'attribut de la balise marquee est utilisé pour contrôler ce qui se passe lorsque le texte atteint le bord du conteneur.">

Maison  >  Article  >  interface Web  >  Comment obtenir un effet de texte défilant en HTML

Comment obtenir un effet de texte défilant en HTML

青灯夜游
青灯夜游original
2021-05-19 15:08:4216146parcourir

En HTML, vous pouvez utiliser la balise marquee pour obtenir l'effet de texte défilant. Cette balise peut insérer un texte défilant dans le document. Le format de syntaxe est "texte. doit être défilé marquee>"Les propriétés de la balise marquee sont utilisées pour contrôler ce qui se passe lorsque le texte atteint le bord du conteneur.

Comment obtenir un effet de texte défilant en HTML

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.

Étiquette de texte défilant de chapiteau

Il y aura de nombreux éléments multimédias dans une page, tels que du texte dynamique, des images dynamiques, de l'audio et de la vidéo, etc., et le plus simple l'un est un texte de défilement vertigineux. En HTML, si nous voulons ajouter du texte de défilement, nous devons utiliser la balise marquee.
Jetons d'abord un coup d'œil à l'exemple le plus simple :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
    </head>

    <body style="background: black;padding: 20px;">
        <marquee><span style="font-weight: bolder;font-size: 40px;color: white;">Welcom CSDN!</span></marquee>
    </body>
</html>

Afin de rendre l'effet d'affichage plus évident, ici l'arrière-plan de la page est défini sur noir et le texte défilant est défini sur blanc. L'effet d'affichage. est comme indiqué ci-dessous :

Comment obtenir un effet de texte défilant en HTML

De cette façon, nous avons implémenté le texte de défilement le plus simple. Il existe également certains attributs dans le texte de défilement pour contrôler la direction de défilement, la vitesse de défilement, etc. Jetons un coup d'œil à quelques comparaisons des propriétés couramment utilisées.

attribut de direction de défilement

Par défaut, le texte défile de droite à gauche Dans les applications réelles, nous devrons peut-être changer la direction afin de pouvoir le définir. cet attribut, les valeurs disponibles pour cet attribut sont : up, down, left, right, qui représentent respectivement le défilement vers le haut, le bas, la gauche et la droite.

Les exemples sont les suivants :

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
        <style>
            body {
                background: black;
                padding: 20px;
            }

            marquee {
                font-weight: bolder;
                font-size: 40px;
                color: white;
            }
        </style>
    </head>

    <body>
        <marquee direction="up">UP</marquee>
        <marquee direction="down">DOWN</marquee>
        <marquee direction="left">LEFT</marquee>
        <marquee direction="right">RIGHT</marquee>
    </body>

</html>

Comment obtenir un effet de texte défilant en HTML

attribut de méthode de défilement de comportement

La méthode de défilement peut être définie via comportement, comme les sports réciproques, etc. Les valeurs disponibles pour le comportement sont : scroll, slide, alternate, qui représentent respectivement le défilement circulaire, le défilement une fois puis l'arrêt, et le défilement alterné d'avant en arrière.

Les exemples sont les suivants :

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
        <style>
            body {
                background: black;
                padding: 20px;
            }

            marquee {
                font-weight: bolder;
                font-size: 40px;
                color: white;
            }
        </style>
    </head>

    <body>
        <marquee behavior="scroll">scroll</marquee>
        <marquee behavior="slide">slide</marquee>
        <marquee behavior="alternate">alternate</marquee>
    </body>

</html>

Comment obtenir un effet de texte défilant en HTML

attribut de délai de défilement scrolldelay et attribut de vitesse de défilement scrollamount

Vous pouvez utilisez l'attribut scrolldelay Définissez l'intervalle de temps pour le défilement du texte. L'unité d'intervalle de temps de scrolldelay est la milliseconde. Cet intervalle de temps est défini comme l'intervalle de temps entre deux étapes de défilement. Si le temps est trop long, un effet stop-and-go se produira.
scrollamount est utilisé pour définir la taille du pas de défilement.
Un exemple est le suivant :

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
        <style>
            body {
                background: black;
                padding: 20px;
            }

            marquee {
                font-weight: bolder;
                font-size: 40px;
                color: white;
            }
        </style>
    </head>

    <body>
        <marquee scrolldelay="800" scrollamount="100">Welcom CSDN!</marquee>
    </body>

</html>

Comment obtenir un effet de texte défilant en HTML

attribut de boucle de défilement de boucle

Si nous voulons que le texte s'arrête après le défilement plusieurs fois, nous pouvons utiliser l'attribut loop.

Un exemple est le suivant :

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
        <style>
            body {
                background: black;
                padding: 20px;
            }

            marquee {
                font-weight: bolder;
                font-size: 40px;
                color: white;
            }
        </style>
    </head>

    <body>
        <marquee loop="2">Welcom CSDN!</marquee>
    </body>

</html>

Tutoriel recommandé : "Tutoriel vidéo HTML"

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:
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 précédent:Le HTML est-il un langage ?Article suivant:Le HTML est-il un langage ?