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. 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
Recommend
Docker builds Redis5.0 and mounts data
Table of contents 1. Simple mounting of persisten...
JavaScript to achieve simple image switching
This article shares the specific code for JavaScr...
Comparing Node.js and Deno
Table of contents Preface What is Deno? Compariso...
Summary of scientific principles and suggestions for web design and production
<br />In the field of network design, resear...
How to reset the root password in mysql8.0.12
After installing the database, if you accidentall...
CentOS 7 builds hadoop 2.10 high availability (HA)
This article introduces how to build a high-avail...
Detailed steps for building, running, publishing, and obtaining a Docker image for the first time
1. Introduction In the past, if you wanted to sta...
Detailed explanation of the initial use of Promise in JavaScript asynchronous programming
1. Overview The Promise object is a specification...
Example of how to build a Mysql cluster with docker
Docker basic instructions: Update Packages yum -y...
JavaScript implements displaying a drop-down box when the mouse passes over it
This article shares the specific code of JavaScri...
Detailed explanation of Vue project packaging
Table of contents 1. Related configuration Case 1...
Installation and use of mysql mycat middleware
1. What is mycat A completely open source large d...
Detailed explanation of node.js installation and HbuilderX configuration
npm installation tutorial: 1. Download the Node.j...
Steps for Docker to build a private warehouse Harbor
Harbor Harbor is an open source solution for buil...
HTML table markup tutorial (14): table header
<br />In HTML language, you can automaticall...