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
Tomcat source code analysis of Web requests and processing
Table of contents Preface 1. EndPoint 2. Connecti...
A brief analysis of kubernetes controllers and labels
Table of contents 01 Common controllers in k8s RC...
Gradient slide effect implemented by CSS3
Achieve results Code html <div class="css...
Docker modifies the configuration information of an unstarted container
When I first used docker, I didn't use docker...
Writing and understanding of arrow functions and this in JS
Table of contents Preface 1. How to write functio...
jQuery implements accordion effects
This article shares the specific code of jQuery t...
Example of how to set up a Linux system to automatically run a script at startup
Preface Hello everyone, I am Liang Xu. At work, w...
Analysis of the principle implementation from the source code of the mini-program developer tool
Table of contents How to view the source code of ...
Detailed explanation of four solutions for implementing in-line scrolling on mobile devices
Discovering Needs If only part of an area is allo...
Docker installation rocketMQ tutorial (most detailed)
RocketMQ is a distributed, queue-based messaging ...
Mysql implements null value first/last method example
Preface We already know that MySQL uses the SQL S...
JavaScript implements click to change the image shape (transform application)
JavaScript clicks to change the shape of the pict...
A detailed introduction to Linux file permissions
The excellence of Linux lies in its multi-user, m...
IE6 BUG and fix is a preventive strategy
Original article: Ultimate IE6 Cheatsheet: How To...
Solution to overflow of html table
If the table is wide, it may overflow. For exampl...