Detailed explanation of the marquee attribute in HTML
|
This 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 following interesting effects This tag is a container tag grammar: <marquee></marquee> Here is a simple example: 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: <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: <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) 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: <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: <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: <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: <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: <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: <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: <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: <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: <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: <marquee scrolldelay="10" >scrolldelay="10" </marquee> <marquee scrolldelay="100" > scrolldelay="100" </marquee> <marquee scrolldelay="1000">scrolldelay="1000" </marquee> The above is a detailed explanation of the marquee attribute in HTML that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: Cleverly use CSS3's webkit-box-reflect to achieve various dynamic effects
>>: Font references and transition effects outside the system
Recommend
How to write CSS elegantly with react
Table of contents 1. Inline styles 2. Use import ...
How to mount the CD to find the rpm package under Linux
Written in front Sometimes you need to install so...
JavaScript implements the drag slider puzzle verification function (html5, canvas)
introduction: Slider drag verification is now use...
Detailed explanation of the basic knowledge of front-end componentization
Table of contents Basic concepts of components Th...
Use PHP's mail() function to send emails
Sending emails using PHP's mail function The ...
How to uninstall MySQL 5.7.19 under Linux
1. Find out whether MySQL was installed before Co...
Summary of 16 XHTML1.0 and HTML Compatibility Guidelines
1. Avoid declaring the page as XML type . The pag...
How to install and modify the initial password of mysql5.7.18 under Centos7.3
This article shares with you the installation of ...
Detailed explanation of building a continuous integration cluster service based on docker-swarm
Preface This article is just a simple record of m...
Solve the problem of using linuxdeployqt to package Qt programs in Ubuntu
I wrote some Qt interface programs, but found it ...
Common array operations in JavaScript
Table of contents 1. concat() 2. join() 3. push()...
Vue Element-ui form validation rule implementation
Table of contents 1. Introduction 2. Entry mode o...
How to implement scheduled backup of MySQL database
1. Create a shell script vim backupdb.sh Create t...
Summary of various methods of implementing article dividing line styles with CSS
This article summarizes various ways to implement...
Analysis of the implementation of MySQL statement locking
Abstract: Analysis of two MySQL SQL statement loc...