HTML marquee (text scrolling) tag

HTML marquee (text scrolling) tag

Introduction to marquee

  • <marquee>Tags are tags that appear in pairs, <marquee>and </marquee>the content between the first tag and the last tag is the scrolling content.
  • <marquee>The attributes of the label mainly include behavior, bgcolor, direction, width, height, hspace, vspace, loop, scrollamount, scrolldelay, etc. They are all optional.

marquee attributes

behavior attribute

  • The parameter value of the behavior attribute is one of alternate, scroll, and slide, which respectively indicate that the text scrolls back and forth, scrolls in a single direction, and scrolls only once.

note

  • If <marquee>the direction and behavior attributes appear in the label at the same time, then the scroll direction of scroll and slide will follow the setting of the parameter in the direction attribute.

bgcolor attribute

  • The background color of the text scrolling range. The parameter value is hexadecimal (form: #AABBCC or #AA5566, etc.) or a predefined color name (such as red, yellow, blue, etc.).

direction property

  • The direction of text scrolling. The attribute parameter values ​​have four single optional values: down, left, right, and up, which represent the scrolling direction down, left, right, and up respectively.

width and height attributes

  • The role of the width and height attributes determines the size of the rectangle of the scrolling text on the page.
  • The width attribute is used to specify the width of the rectangle, and the height attribute specifies the height of the rectangle.
  • The parameter values ​​of these two attributes can be numbers or percentages. The number represents the number of pixels (width or height) occupied by the rectangle, and the percentage represents the percentage (width or height) of the browser window occupied by the rectangle.

hspace and vspace attributes

  • These two properties determine the blank area around the scroll rectangle area.

loop attribute

  • The loop attribute determines the number of times to scroll the text, the default is infinite loop. The parameter value can be any positive integer. If the parameter value is set to -1 or infinite, it will loop infinitely.

scrollamount and scrolldelay properties

  • These two attributes determine the speed (scrollamount) and delay (scrolldelay) of text scrolling, and the parameter values ​​are both positive integers.

align attribute

  • This attribute determines that the scrolling text is located at the top, bottom, left, and right of the inner border of the distance shape.

note

  • You can also <marquee>and </marquee>content between replaced with an image, or other object functions.

Each attribute parameter

  • direction indicates the direction of scrolling, the value can be left, right, up, down, the default is left
  • Behavior represents the way of scrolling, the value can be scroll (continuous scrolling) slide (slide once) alternate (scrolling back and forth)
  • loop represents the number of loops, the value is a positive integer, the default is infinite loop
  • scrollamount represents the movement speed, the value is a positive integer, the default is 6
  • scrolldelay represents the pause time, the value is a positive integer, the default is 0, the unit is milliseconds
  • align represents the vertical alignment of the element, the value can be top, middle, bottom, the default is middle
  • bgcolor represents the background color of the motion area, the value is hexadecimal RGB color, the default is white
  • height, width represent the height and width of the motion area, the value is a positive integer (unit is pixel) or a percentage, the default width=100% height is the height of the element in the label.
  • hspace and vspace indicate the horizontal and vertical distances from the element to the boundary of the region. The value is a positive integer and the unit is pixel.
  • οnmοuseοver=this.stop() οnmοuseοut=this.start() means that the scrolling stops when the mouse is above the area, and continues to scroll when the mouse is moved away.

Comprehensive example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>marquee</title>
</head>

<body>
    <marquee direction="up">我向上滚动</marquee>
    <hr>
    <marquee direction="down">我向下滚动</marquee>
    <hr>
    <marquee direction="left">我向左滚动</marquee>
    <hr>
    <marquee direction="right">我向右滚动</marquee>
    <hr>
    <marquee scrollamount="10">我速度很慢</marquee>
    <hr>
    <marquee scrollamount="100">我速度很快</marquee>
    <hr>
    <marquee scrolldelay="30">我小步前进。</marquee>
    <hr>
    <marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>
    <hr>
    <marquee loop="1">我滚动一次</marquee>
    <hr>
    <marquee loop="2">我滚动两次</marquee>
    <hr>
    <marquee loop="infinite">我无限循环滚动</marquee>
    <hr>
    <marquee behavior="alternate">我来回滚动</marquee>
    <hr>
    <marquee behavior="scroll">我单方向循环滚动</marquee>
    <hr>
    <marquee behavior="scroll" direction="up" height="30">我单方向向上循环滚动</marquee>
    <hr>
    <marquee behavior="slide">我只滚动一次</marquee>
    <hr>
    <marquee behavior="slide" direction="up">我向上只滚动一次</marquee>
    <hr>
    <marquee behavior=="slide" direction="left" bgcolor="red">我的背景色是红色的</marquee>
    <hr>
    <marquee width="600" height="50" bgcolor="red">我宽300像素,高30像素。</marquee>
    <hr>
    <marquee width="300" height="30" vspace="10" hspace="10" bgcolor="red">我矩形边缘水平和垂直距周围各10像素。</marquee>
    <hr>
    <marquee width="300" height="30" vspace="50" hspace="50" bgcolor="red">我矩形边缘水平和垂直距周围各50像素。</marquee>
    <hr>
    <marquee align="absbottom">绝对底部对齐</marquee>
    <hr>
    <marquee align="absmiddle">绝对中央对齐</marquee>
    <hr>
    <marquee align="baseline">底线对齐</marquee>
    <hr>
    <marquee align="bottom">底部对齐(默认)</marquee>
    <hr>
    <marquee align="left">左对齐</marquee>
    <hr>
    <marquee align="middle"> 中间对齐</marquee>
    <hr>
    <marquee align="right">右对齐</marquee>
    <hr>
    <marquee align="texttop">顶线对齐</marquee>
    <hr>
    <marquee align="top">顶部对齐</marquee>
</body>

</html>

Guess you like

Origin blog.csdn.net/XVJINHUA954/article/details/112225484