The marquee tag in HTML achieves seamless scrolling marquee effect

The <marquee> tag is a tag that appears in pairs. The content between the first tag <marquee> and the last tag </marquee> is the scrolling content. The main attributes of the <marquee> tag include behavior, bgcolor, direction, width, height, hspace, vspace, loop, scrollamount, scrolldelay, etc., all of which are optional.

Today, when I was doing the big wheel lottery on WeChat, I wanted to make all the users' lottery records scroll seamlessly. Unfortunately, my JS skills are too poor, and I couldn't think of a way to achieve it for a while, so I searched Baidu for various similar effects. But I accidentally discovered an HTML tag - <marquee></marquee>, which can achieve a variety of scrolling effects without JS control. Using the marquee tag, you can not only scroll text, but also scroll pictures, tables, etc. It is convenient and quick to use, which really saves me a lot of time.

The marquee tag is not part of HTML3.2 and is only supported by MSIE3 and later kernels, so if you use a non-IE kernel browser (such as Netscape) you may not be able to see some of the interesting effects below. This tag is a container tag.

1. Several important attributes of the marquee tag:

1.direction: scroll direction (including 4 values: up, down, left, right)

Description: up: scroll from bottom to top; down: scroll from top to bottom; left: scroll from right to left; right: scroll from left to right.

Syntax: <marquee direction="scroll direction">...</marquee>

2.behavior: scrolling mode (including 3 values: scroll, slide, alternate)

Description: scroll: scroll in a loop, the default effect; slide: scroll once and then stop; alternate: scroll back and forth alternately.

Syntax: <marquee behavior="scroll mode">...</marquee>

3.scrollamount: scrolling speed (scrolling speed is to set the length of movement each time you scroll, in pixels)

Syntax: <marquee scrollamount="5">...</marquee>

4.scrolldelay: Set the delay time between scrolling twice. If the value is too large, there will be a pause effect after one step (set the scrolling time interval in milliseconds)

Syntax: <marquee scrolldelay="100">...</marquee>

5.loop: Set the number of scrolling loops (the default value is -1, the scrolling will loop continuously)

Syntax: <marquee loop="2">...</marquee>

<marquee loop="-1" bgcolor="#CCCCCC">I will keep walking. </marquee>

<marquee loop="2" bgcolor="#CCCCCC">I only walk twice</marquee>

6.width, height: set the width and height of the scrolling subtitles

Syntax: <marquee width="500" height="200">...</marquee>

7.bgcolor: Set the background color of the scrolling subtitle (can be a color value, or rgb() or rgba() function)

Syntax: <marquee bgcolor="rgba(0,0,0,0.2)">...</marquee>

8.hspace, vspace: blank space (equivalent to setting margin value)

Description: hspace: sets the distance between the position of the active subtitle and the horizontal border of the parent container. For example, hspace="10" is equivalent to: margin: 0 10px;

vspace: Sets the distance between the position of the active subtitle and the vertical border of the parent container. For example, vspace="10" is equivalent to: margin: 10px 0;

Syntax: <marquee hspace="10" vspace="10">...</marquee> (equivalent to: margin: 10px;)

9.align: Set the alignment of the scrolling subtitle content (including 9 values: absbottom, absmiddle, baseline, bottom, left, middle, right, texttop, top)

Description: absbottom: absolute bottom alignment (aligned with the bottom of letters such as g and p)
absmiddle: absolute center alignment
baseline: bottom line alignment
bottom: bottom alignment (default)
left: left alignment
middle: middle alignment
right: right alignment
texttop: top line alignment
top: top alignment

Syntax: <marquee align="alignment">...</marquee>

10.face: Set the font of the scrolling subtitles

Syntax: <marquee font="楷体_GB2312"></marquee>

11.color: Set the text color of the scrolling subtitles

Syntax: <marquee color="#333"></marquee>

12.size: Set the font size of the scrolling subtitles

Syntax: <marquee size="3"></marquee>

13.STRONG: Set the text of the scrolling subtitle to bold

Syntax: <marquee STRONG></marquee>

2. Two events commonly used by marquee:

onMouseOut="this.start()" is used to set the mouse to continue scrolling when it moves out of the area
onMouseOver="this.stop()" is used to stop scrolling when the mouse moves into this area

 <marquee onMouseOut="this.start()" onMouseOver="this.stop()">Two events commonly used in marquee</marquee>

The complete code is as follows:

 <marquee id="affiche" align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">

Although <marquee> has many parameters, it cannot achieve complex and customized special marquee effects after all, and there are browser limitations, so we will use JavaScript to achieve the marquee scrolling effect in most cases.

This is the end of this article about how to achieve seamless scrolling marquee effect using marquee tag in HTML. For more relevant marquee seamless scrolling marquee content, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!