HTML marquee tag usage examples

This tag is not part of HTML3.2 and only supports 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 following interesting effects. This tag is a container tag

Marquee Announcement Rolling Code

The simplest website announcement scrolling code, based on Marquee, scrolling vertically upwards, in Table format, can be used even if you don't know CSS.

="T" style="LINE-HEIGHT: 150%;font-size:9pt"><FONT color=#000033> <T" style="LINE-HEIGHT: 150%;font-size:9pt"><FONT color=#000034> </T"><MARQUEE onmouseover=this.stop() onmouseout=this.start() scrollAmount=1 scrollDelay=100 direction=up height="99%"> <TABLE vAlign=top height=120> <T" style="LINE-HEIGHT: 150%;font-size:9pt"><FONT color=#000035> </T"><MARQUEE onmouseover=this.stop() onmouseout=this.start() scrollAmount=1 scrollDelay=100 direction=up height="99%"> <TABLE vAlign=top height=120> <T" style="LINE-HEIGHT: 150%;font-size:9pt"><FONT color=#000033> </T"><MARQUEE onmouseover=this.stop() onmouseout=this.start() </A></FONT><FONT color=#000033>·<A href="#">123WORDPRESS.COMMore script codes...</A></FONT><FONT color=#000033>·<A href="#">A learning source code website... </A></FONT><FONT color=#000033>·<A href="#">If you have any suggestions, please submit them to us... </A></FONT><FONT color=#000033>·<A href="#">Thank you very much for your frequent patronage</A></FONT><FONT color=#000033>·<A href="#">Thank you all again, goodbye</A></FONT></TD></TR></TBODY></TABLE></MARQUEE></td> </tr> </table></div></body></html>

Tip: You can modify some of the code before running

grammar:

<marquee></marquee>

Here is a simple example:

The code is as follows:

Copy code

The code is as follows:

<marquee><font size=+3 color=red>Hello, World</font></marquee>

The following two events are often used:

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

The code is as follows:

Copy code

The code is as follows:

<marquee onMouseOut="this.start()" onMouseOver="this.stop()">onMouseOut="this.start()" : Used to set the mouse to continue scrolling when it moves out of the area onMouseOver="this.stop()" : Used to set the mouse to stop scrolling when it moves into the area</marquee>

Here is a complete example:

The code is as follows:

Copy code

The 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()">
Here is a complete example
</marquee>

This tag supports up to 11 attributes:

align

Set the alignment of the <marquee> tag content
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

The code is as follows:

Copy code

The code is as follows:

<marquee align="absbottom">align="absbottom": absolute bottom alignment (aligned with the bottom of letters such as g and p). </marquee>
<marquee align="absmiddle">align="absmiddle": absolute center alignment. </marquee>
<marquee align="baseline">align="baseline": Align the baseline. </marquee>
<marquee align="bottom">align="bottom": bottom alignment (default). </marquee>
<marquee align="left">align="left": left aligned. </marquee>
<marquee align="middle">align="middle": align in the middle. </marquee>
<marquee align="right">align="right": right aligned. </marquee>
<marquee align="texttop">align="texttop": top line aligned. </marquee>
<marquee align="top">align="top": top alignment. </marquee>

behavior

Set the scrolling method:

alternate: means rolling back and forth between the two ends.
scroll: means scrolling from one end to the other and repeating.
slide: means scrolling from one end to the other without repeating.

The code is as follows:

Copy code

The code is as follows:

<marquee behavior="alternate">alternate: means scrolling back and forth between the two ends. </marquee>
<marquee behavior="scroll">scroll: means scrolling from one end to the other and repeating. </marquee>
<marquee behavior="slide">slide: means scrolling from one end to the other without repeating. </marquee>

bgcolor

Set the background color of the active subtitle. The background color can be set in RGB, hexadecimal value format or color name.

The code is as follows:

Copy code

The code is as follows:

<marquee bgcolor="#006699">Set the background color of the active subtitle bgcolor="#006699"</marquee>
<marquee bgcolor="RGB(10%,50%,100%,)">Set the background color of the active subtitles bgcolor="rgb(10%,50%,100%,)"</marquee>
<marquee bgcolor="red">Set the background color of the active subtitle bgcolor="red"</marquee>

direction

Set the scroll direction of the active subtitles

The code is as follows:

Copy code

The code is as follows:

<marquee direction="down">Set the scroll direction of the active subtitle direction="down": downward</marquee>
<marquee direction="left">Set the scroll direction of the active subtitle direction="left": left</marquee>
<marquee direction="right">Set the scroll direction of the active subtitle direction="right": right</marquee>
<marquee direction="up">Set the scroll direction of the active subtitle direction="up": upward</marquee>

height

Set the height of the active subtitle

The code is as follows:

Copy code

The code is as follows:

<marquee height="500" direction="down" bgcolor="#CCCCCC">Set the height of the active subtitle height="500"</marquee>

width

Set the width of the active subtitle

The code is as follows:

Copy code

The code is as follows:

<marquee width="500" bgcolor="#CCCCCC">Set the width of the active subtitle width="500"</marquee>

hspace

Set the distance between the position of the active subtitle and the horizontal border of the parent container

This controls the horizontal space around the display box.

The code is as follows:

Copy code

The code is as follows:

<table width="500" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><marquee hspace="100" bgcolor="#CCCCCC">hspace="100"</marquee></td>
</tr>
</table>

vspace

Set the distance between the position of the active subtitle and the vertical border of the parent container

This controls the vertical space around the display box.

The code is as follows:

Copy code

The code is as follows:

<marquee vspace="100" bgcolor="#CCCCCC">hspace="100"</marquee>

loop

Set the number of scrolling times. When loop=-1, it means scrolling all the time. The default value is -1
The code is as follows:

Copy code

The code is as follows:

<marquee loop="-1" bgcolor="#CCCCCC">I will keep walking. </marquee>
<p> </p>
<marquee loop="2" bgcolor="#CCCCCC">I only walk twice</marquee>

scrollamount

Set the scrolling speed of the active subtitles in pixels

The code is as follows:

Copy code

The code is as follows:

<marquee scrollamount="10" >scrollamount="10" </marquee>
<marquee scrollamount="20" >scrollamount="20" </marquee>
<marquee scrollamount="30" >scrollamount="30" </marquee>

scrolldelay

Set the delay time between scrolling the active subtitle twice, in milliseconds.
If the value is too large, there will be a pause effect.

The code is as follows:

Copy code

The code is as follows:

<marquee scrolldelay="10" >scrolldelay="10" </marquee>
<marquee scrolldelay="100" > scrolldelay="100" </marquee>
<marquee scrolldelay="1000">scrolldelay="1000" </marquee>

<<: CSS3 new layout: flex detailed explanation

>>: Vue.js handles Icon icons through components