Marquee attribute analysis in HTML
This article mainly introduces the relevant information on the marquee attribute in detail. Friends who need it can refer to it
This tag is not part of HTML3.2 and only supports MSIE3 Later kernel, 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
Syntax:
<marquee></marquee>
The following is the simplest 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 set the mouse to stop scrolling when it moves into the area
The code is as follows:
<marquee onMouseOut="this.start()" onMouseOver="this.stop()">onMouseOut="this.start()" ：用来设置鼠标移出该区域时继续滚动 onMouseOver="this.stop()"：用来设置鼠标移入该区域时停止滚动</marquee>
This 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()"> 这是一个完整的例子 </marquee>
This tag supports up to 11 attributes:
align
Set the alignment of
absbottom: Absolute bottom alignment (aligned with the bottom end of letters such as g, p, etc.)
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:
<marquee align="absbottom">align="absbottom"：绝对底部对齐（与g、p等字母的最下端对齐）。 </marquee> <marquee align="absmiddle">align="absmiddle"： 绝对中央对齐。 </marquee> <marquee align="baseline">align="baseline"： 底线对齐。 </marquee> <marquee align="bottom">align="bottom"： 底部对齐（默认）。 </marquee> <marquee align="left">align="left"： 左对齐。 </marquee> <marquee align="middle">align="middle"： 中间对齐。 </marquee> <marquee align="right">align="right"： 右对齐。 </marquee> <marquee align="texttop">align="texttop"： 顶线对齐。 </marquee> <marquee align="top">align="top"： 顶部对齐。 </marquee>
behavior
Set the scrolling method:
alternate: expressed between two Scroll back and forth between ends.
scroll: Indicates scrolling from one end to the other end and will be repeated.
slide: means scrolling from one end to the other without repetition.
The code is as follows:
<marquee behavior="alternate">alternate：表示在两端之间来回滚动。 </marquee> <marquee behavior="scroll">scroll：表示由一端滚动到另一端，会重复。</marquee> <marquee behavior="slide">slide： 表示由一端滚动到另一端，不会重复。</marquee>
bgcolor
Set the background color of active subtitles. The background color can be in RGB or hexadecimal value format or color. name to set.
The code is as follows:
<marquee bgcolor="#006699">设定活动字幕的背景颜色 bgcolor="#006699"</marquee> <marquee bgcolor="RGB(10%,50%,100%,)">设定活动字幕的背景颜色 bgcolor="rgb(10%,50%,100%,)"</marquee> <marquee bgcolor="red">设定活动字幕的背景颜色 bgcolor="red"</marquee>
direction
Set the scrolling direction of active subtitles
The code is as follows:
<marquee direction="down">设定活动字幕的滚动方向direction="down"：向下</marquee> <marquee direction="left">设定活动字幕的滚动方向direction="left"：向左</marquee> <marquee direction="right">设定活动字幕的滚动方向direction="right"：向右</marquee> <marquee direction="up">设定活动字幕的滚动方向direction="up"：向上</marquee>
height
Set the height of active subtitles
The code is as follows:
<marquee height="500" direction="down" bgcolor="#CCCCCC">设定活动字幕的高度height="500"</marquee>
width
Set the width of the active subtitles
The code is as follows:
<marquee width="500" bgcolor="#CCCCCC">设定活动字幕的宽度width="500"</marquee>
hspace
Set the distance between the position of the active subtitles and the horizontal border of the parent container
This controls the horizontal (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
Settings The distance between the position of the active subtitles 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 times to scroll. When loop=-1, it means scrolling all the time. The default is -1
The code is as follows:
<marquee loop="-1" bgcolor="#CCCCCC">我会不停地走。</marquee> <p> </p> <marquee loop="2" bgcolor="#CCCCCC">我只走两次哦</marquee>
scrollamount
Set the scrolling speed of 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 Determine the delay time between the active subtitles scrolling twice, unit millisecond (millisecond)
If the value is large, there will be a step-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>
and above The above is a detailed explanation of the marquee attribute in HTML introduced by php Chinese website. I hope it will be helpful to everyone.
Related articles:
Detailed usage analysis of marquee
Skillfully use the marquee attribute in HTML to achieve dancing text
A simple method to achieve scrolling effect based on HTML tag marquee
The above is the detailed content of Marquee attribute analysis in HTML. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Table Border in HTML
Sep 04, 2024 pm 04:49 PM
Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.
Nested Table in HTML
Sep 04, 2024 pm 04:49 PM
This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.
HTML margin-left
Sep 04, 2024 pm 04:48 PM
Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.
HTML Table Layout
Sep 04, 2024 pm 04:54 PM
Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.
HTML Input Placeholder
Sep 04, 2024 pm 04:54 PM
Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.
HTML Ordered List
Sep 04, 2024 pm 04:43 PM
Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively
Moving Text in HTML
Sep 04, 2024 pm 04:45 PM
Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.
HTML onclick Button
Sep 04, 2024 pm 04:49 PM
Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.
