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
Summary of Linux system user management commands
User and Group Management 1. Basic concepts of us...
uniapp realizes the recording upload function
Table of contents uni-app Introduction HTML part ...
Common errors and solutions for connecting Navicat to virtual machine MySQL
Question 1 solve Start the service: service mysql...
Ideas and codes for implementing Vuex data persistence
What is vuex vuex: is a state manager developed s...
JavaScript function call classic example code
Table of contents JavaScript function call classi...
Detailed explanation of Vue's front-end system and front-end and back-end separation
Table of contents Overview Front-end knowledge sy...
Markup Languages - Lists Again
Click here to return to the 123WORDPRESS.COM HTML ...
How to use Vue cache function
Table of contents Cache function in vue2 Transfor...
Implementing a simple timer based on Vue method
Vue's simple timer is for your reference. The...
Example code and method of storing arrays in mysql
In many cases, arrays are often used when writing...
Detailed explanation of Xshell common problems and related configurations
This article introduces common problems of Xshell...
Summary of Nginx load balancing methods
To understand load balancing, you must first unde...
Linux Dig command usage
Dig Introduction: Dig is a tool that queries DNS ...
Element tree control integrates a drop-down menu with icons (tree+dropdown+input)
Table of contents Requirements: Implementation st...
Detailed tutorial on customizing the installation path of MySQL 5.7.18 version (binary package installation)
Installation path: /application/mysql-5.7.18 1. P...