The <marquee> tag is a tag that appears in pairs. The content between the first tag <marquee> and the last tag</marquee> is scrolling content. The attributes of the <marquee> tag mainly include behavior, bgcolor, direction, width, height, hspace, vspace, loop, scrolllamount, scrolldelay, etc. They are all optional.
Today, when I was doing a large turntable lottery draw on WeChat, I wanted to make the lottery records of all users into a seamless scrolling effect. Unfortunately, my JS foundation was too poor and I couldn't think of a way to achieve it for the time being, so I had various similar effects on Baidu. But I accidentally discovered an html tag - <marquee></marquee> can achieve multiple scrolling effects without js control. Using the marquee tag can not only scroll text, but also scroll pictures, tables, etc., and it is also convenient and quick to use, which really saves me a lot of time.
The marquee tag is not part of HTML3.2 and only supports MSIE3 later kernels, so if you use non-IE kernel browsers (such as Netscape) you may not be able to see some interesting effects below. This tag is a container tag.
1. Several important attributes of marquee tag:1.direction: scrolling 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 method (including 3 values: scroll, slide, alter)
Description: scroll: loop scroll, default effect; slide: stop when scrolling only once; alternate: scrolling back and forth alternately.
Syntax: <marquee behavior=scrolling method>...</marquee>
3.scrollamount: scroll speed (scroll speed is the length of movement when each scroll is set, in pixels)
Syntax: <marquee scrollamount=5>...</marquee>
4. scrolldelay: Set the delay time between scrolling twice. If the value is large, there will be a step-by-step effect (set the scrolling time interval, unit is milliseconds)
Syntax: <marquee scrolldelay=100>...</marquee>
5.loop: Set the number of times the scrolling cycle (the default value is -1, the scrolling will continue to cycle)
Syntax: <marquee loop=2>...</marquee>
<marquee loop=-1 bgcolor=#CCCCCC>I will keep walking. </marquee>
<marquee loop=2 bgcolor=#CCCCCC>I only go twice</marquee>
6.width, height: Set the width and height of the scroll subtitles
Syntax: <marquee width=500 height=200>...</marquee>
7.bgcolor: Set the background color of the scroll subtitles (can be 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: Set the distance between the position in the active subtitles from the horizontal border of the parent container, such as hspace=10, which is equivalent to: margin: 0 10px;
vspace: Set the distance between the position in the active subtitles from the vertical border of the parent container, such as vspace=10, which is equivalent to: margin: 10px 0;
Syntax: <marquee hspace=10 vspace=10>...</marquee>(equivalent to: margin: 10px;)
9.align: Set the alignment method of scrolling subtitles (including 9 values: absbottom, absmiddle, baseline, bottom, left, middle, right, texttop, top)
Description: absbottom: Absbottom aligned with the bottom end of letters such as g, p)
absmiddle: Absolutely central alignment
baseline: Bottom line alignment
bottom: bottom alignment (default)
left: left aligned
middle: middle alignment
right: right aligned
texttop: Top line alignment
top: top alignment
Syntax: <marquee align=align>...</marquee>
10.face: Set text fonts for scrolling subtitles
Syntax: <marquee font=KaiTi_GB2312></marquee>
11.color: Set the text color of scrolling subtitles
Syntax: <marquee color=#333></marquee>
12.size: Set the text font size of scrolling subtitles
Syntax: <marquee size=3></marquee>
13.STRONG: Set the text of scrolling subtitles to be bold
2. Two common events used by marquee:Syntax: <marquee STRONG></marquee>
onMouseOut=this.start() is used to set the mouse to continue scrolling when it moves out of this area.
onMouseOver=this.stop() is used to set the mouse to stop scrolling when it moves into this area.
<marquee onMouseOut=this.start() onMouseOver=this.stop()>Two common events used by 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 scrolllamount=10 scrolldelay=100 onMouseOut=this.start() onMouseOver=this.stop()>
Although there are many parameters of <marquee>, it cannot achieve complex and customized special marquee effects after all, and there are browser restrictions, so in more cases we will use JavaScript to achieve marquee scrolling effect.
This is the article about the effect of seamless scrolling marquee tags in HTML. This is all about this article. For more related contents of seamless scrolling marquee, please search for previous articles from Wulin.com or continue to browse the related articles below. I hope everyone will support Wulin.com in the future!