La balise <Marquee> est une balise qui apparaît par paires. Le contenu entre le premier balise <Marquee> et le dernier balise </ Marquee> fait défiler le contenu. Les attributs de la balise <Marquee> incluent principalement le comportement, le bgcolor, la direction, la largeur, la hauteur, le HSPACE, le VSPACE, la boucle, le scrolllatent, le scrolldelay, etc. Ils sont tous facultatifs.
Aujourd'hui, lorsque je faisais un grand tirage au sort de la loterie sur WeChat, je voulais faire des enregistrements de loterie de tous les utilisateurs dans un effet de défilement transparent. Malheureusement, ma fondation JS était trop pauvre et je ne pouvais pas penser à un moyen de l'atteindre pour le moment, j'ai donc eu divers effets similaires sur Baidu. Mais j'ai découvert accidentellement qu'une balise HTML - <Marquee> </ Marquee> peut réaliser plusieurs effets de défilement sans contrôle JS. L'utilisation de la balise Marquee peut non seulement faire défiler le texte, mais aussi faire défiler des images, des tables, etc., et il est également pratique et rapide, ce qui me fait vraiment gagner beaucoup de temps.
La balise de chapiteau ne fait pas partie de HTML3.2 et ne prend en charge que les noyaux MSIE3 plus tard, donc si vous utilisez des navigateurs de noyau non IE (comme NetScape), vous ne pourrez peut-être pas voir des effets intéressants ci-dessous. Cette balise est une balise de conteneur.
1. Plusieurs attributs importants de la balise de chapiteau:1.Direction: direction de défilement (y compris 4 valeurs: haut, bas, gauche, droite)
Description: UP: Faites défiler du bas en haut; En bas: faites défiler de haut en bas; Gauche: Faites défiler de droite à gauche; Droite: Faites défiler de gauche à droite.
Syntaxe: <Marquee Direction = Scroll Direction> ... </ Marquee>
2.BaVior: méthode de défilement (y compris 3 valeurs: défilement, diapositive, alter)
Description: Scroll: boucle de boucle, effet par défaut; Diapositive: arrêtez-vous lors du défilement d'une seule fois; Alternate: défiler alternativement d'avant en arrière.
Syntaxe: <Marquee comportement = méthode de défilement> ... </ Marquee>
3.ScrolLamount: vitesse de défilement (la vitesse de défilement est la longueur du mouvement lorsque chaque défilement est réglé, en pixels)
Syntaxe: <Marquee ScrolLamount = 5> ... </ Marquee>
4. Scrolldelay: Réglez le temps de retard entre le défilement deux fois. Si la valeur est grande, il y aura un effet étape par étape (définir l'intervalle de temps de défilement, l'unité est des millisecondes)
Syntaxe: <Marquee Scrolldelay = 100> ... </ Marquee>
5.Loop: définissez le nombre de fois le cycle de défilement (la valeur par défaut est -1, le défilement continuera de faire du vélo)
Syntaxe: <Marquee Loop = 2> ... </ Marquee>
<Marquee Loop = -1 bgColor = # cccccc> Je continuerai à marcher. </ Marquee>
<Marquee Loop = 2 bgColor = # CCCCCC> Je ne vais que deux fois </ Marquee>
6. largeur, hauteur: réglez la largeur et la hauteur des sous-titres de défilement
Syntaxe: <marquee width = 500 height = 200> ... </ Marquee>
7.bgcolor: définissez la couleur d'arrière-plan des sous-titres de défilement (peut être la valeur de la couleur, ou rgb () ou rgba ())
Syntaxe: <Marquee BgColor = RGBA (0,0,0,0,2)> ... </ Marquee>
8.Hspace, VSPACE: Espace vierge (équivalent à la valeur de la valeur de la marge)
Description: HSPACE: Réglez la distance entre la position dans les sous-titres actifs de la bordure horizontale du conteneur parent, tel que HSPACE = 10, ce qui est équivalent à: marge: 0 10px;
VSPACE: Réglez la distance entre la position dans les sous-titres actifs de la bordure verticale du conteneur parent, tel que VSPACE = 10, ce qui équivaut à: marge: 10px 0;
Syntaxe: <marquee hspace = 10 vSpace = 10> ... </ Marquee> (équivalent à: marge: 10px;)
9.Align: Définissez la méthode d'alignement des sous-titres de défilement (y compris 9 valeurs: ABSBOTTOM, ABSMIDDLE, BASELINE, BAS, GAUCHE, MIDE, DROIT, TEXTTOP, TOP)
Description: Absbottom: Absbottom aligné avec l'extrémité inférieure des lettres telles que G, P)
Absmiddle: Alignement absolument central
BASELINE: Alignement de la ligne de fond
En bas: alignement inférieur (par défaut)
Gauche: gauche alignée
Middle: Alignement moyen
à droite: à droite alignée
TextTop: alignement de la ligne de haut niveau
haut: alignement supérieur
Syntaxe: <Marquee Align = Align> ... </ Marquee>
10.Face: Définissez des polices de texte pour le défilement des sous-titres
Syntaxe: <Marquee Font = Kaiti_GB2312> </ Marquee>
11.Color: Définissez la couleur du texte des sous-titres de défilement
Syntaxe: <Marquee Color = # 333> </ Marquee>
12.Size: Définissez la taille de la police de texte des sous-titres de défilement
Syntaxe: <marquee size = 3> </ Marquee>
13.Strong: Définissez le texte des sous-titres de défilement pour être audacieux
2. Deux événements communs utilisés par le marquee:Syntaxe: <Marquee Strong> </ Marquee>
onMouseout = this.start () est utilisé pour définir la souris pour continuer à faire défiler lorsqu'il sort de cette zone.
onMouseOver = this.stop () est utilisé pour définir la souris pour arrêter de faire défiler lorsqu'elle se déplace dans cette zone.
<marquee onMouseout = this.start () onMouseOver = this.stop ()> Deux événements communs utilisés par Marquee </ Marquee>
Le code complet est le suivant:
<Marquee ID = Affiche Align = Left Behavior = Scroll BGColor = # FF0000 Direction = Up Hight = 300 Width = 200 HSPACE = 50 VSPACE = 20 LOOP = -1 ScrollAmount = 10 ScrollDelay = 100 onMouseout = this.Start () OnMouseOver = this.stop ()>>>>
Bien qu'il existe de nombreux paramètres de <Marquee>, il ne peut pas atteindre les effets de marquee spéciaux complexes et personnalisés après tout, et il existe des restrictions de navigateur, donc dans plus de cas, nous utiliserons JavaScript pour réaliser un effet de défilement de marquee.
Ceci est l'article sur l'effet des balises de marquee de défilement sans couture dans HTML. Il s'agit de cet article. Pour plus de contenu lié du marquee de défilement transparent, veuillez rechercher des articles précédents de Wulin.com ou continuer à parcourir les articles connexes ci-dessous. J'espère que tout le monde soutiendra Wulin.com à l'avenir!