En HTML5, la balise marquee est utilisée pour créer du texte ou des images défilantes, la syntaxe "
texte ou image)" elle permet de faire défiler le contenu contenu dans la paire de balises horizontalement ou horizontalement. sur la page Web Faites défiler verticalement vers le bas. En définissant des propriétés, vous pouvez contrôler ce qui se passe lorsque le texte atteint le bord du conteneur. Par exemple, la propriété de comportement peut contrôler la méthode de défilement (défilement cyclique, défilement une seule fois puis arrêt, et). défilement alterné d’avant en arrière).
L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.
En HTML, chapiteau signifie "défilement". L'élément marquee (
Cette balise est utilisée pour faire défiler du texte ou des images vers le bas horizontalement ou verticalement sur une page Web. Vous pouvez utiliser ses propriétés pour contrôler ce qui se passe lorsque le texte atteint le bord du conteneur.
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 est un texte défilant très haut en HTML, si. nous voulons Pour ajouter du texte défilant, vous devez utiliser la balise marquee
. marquee
标签。
我们先来看一下最简单的示例:
<!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 PHPCN!</span></marquee> </body> </html>
为了显示效果更明显,这里将页面背景设置为黑色,将滚动文字设置为白色,显示效果如图:
这样我们就实现了一个最简单的滚动文字,在滚动文字中还有一些属性用于控制滚动方向、滚动速度等,下面我们就来看一下几个比较常用的属性。
默认情况下,文字从右向左滚动,实际应用中,我们可能需要改变方向,就可以通过该属性来设置,该属性可用值有:up
,down
,left
,right
,分别表示向上、向下、向左和向右滚动。
示例如下:
<!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>
通过behavior 可以设置滚动方式,如往复运动等。behavior可用值有:scroll
,slide
,alternate
Jetons d'abord un coup d'œil à l'exemple le plus simple :
<!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>
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 :
Par défaut, le texte défile de droite à gauche dans les applications réelles, nous devrons peut-être changer la direction, nous pouvons donc la définir via cet attribut. Les valeurs disponibles sont : up
, down
, left
, right
, qui représentent respectivement haut, bas, gauche et faites défiler vers la droite.
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 PHPCN!</marquee> </body> </html>
scroll
, slide
et alternate
, qui représentent respectivement un défilement circulaire, un défilement une seule fois puis un arrêt, et 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 loop="2">Welcom CSDN!</marquee> </body> </html>
attribut de délai de défilement scrolldelay et attribut de vitesse de défilement scrollamount
L'intervalle de temps pour le défilement du texte peut être défini via l'attribut scrolldelay. 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 :
rrreee🎜🎜🎜🎜🎜loop Attribut de boucle de défilement🎜🎜🎜Si nous voulons que le texte arrête de défiler après quelques fois, nous pouvons utiliser l'attribut de boucle. 🎜🎜Les exemples sont les suivants : 🎜rrreee🎜🎜🎜🎜 (Partage de vidéos d'apprentissage : 🎜Début avec l'interface Web🎜)🎜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!