Detailed explanation of marquee attribute in html

高洛峰
Release: 2017-02-09 17:45:52
Original
1762 people have browsed it

This article mainly introduces relevant information about the marquee attribute in HTML. Friends who need it can refer to it

This tag is not part of HTML3.2, and only supports the kernel after MSIE3, so if you Using non-IE core browsers (such as Netscape) may not be able to see some of the following interesting effects

This tag is a container tag

Syntax:

<marquee></marquee>
Copy after login

The following is the simplest example:

The code is as follows:

<marquee><font size=+3 color=red>Hello, World</font></marquee>
Copy after login

The following two events Frequently 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 Stop scrolling when moving into the area

The code is as follows:

<marquee onMouseOut="this.start()" onMouseOver="this.stop()">onMouseOut="this.start()" :用来设置鼠标移出该区域时继续滚动 onMouseOver="this.stop()":用来设置鼠标移入该区域时停止滚动</marquee>
Copy after login

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>
Copy after login

This tag supports up to 11 attributes:

align

Set the alignment of tag content

absbottom: Absolute bottom alignment (aligned with the bottom 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>
Copy after login

behavior

Set the scrolling method:

alternate : Indicates scrolling back and forth between the two 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>
Copy after login

bgcolor

Set the background color of active subtitles, background Colors can be set in RGB, hexadecimal value format or color name.

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>
Copy after login

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>
Copy after login

height

Set the height of active subtitles

The code is as follows:

<marquee height="500" direction="down" bgcolor="#CCCCCC">设定活动字幕的高度height="500"</marquee>
Copy after login

width

Set the width of active subtitles

The code is as follows :

<marquee width="500" bgcolor="#CCCCCC">设定活动字幕的宽度width="500"</marquee>
Copy after login

hspace

Set the distance between the active subtitle position 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>
Copy after login

vspace

Set the distance between the position of the active subtitles and the vertical border of the parent container

This controls the vertical (vertical) space around the display box.

The code is as follows :

<marquee vspace="100" bgcolor="#CCCCCC">hspace="100"</marquee>
Copy after login

loop

Set the number of times to scroll. When loop=-1, it means scrolling all the time. The default is The code for -1

is as follows:

<marquee loop="-1" bgcolor="#CCCCCC">我会不停地走。</marquee>
<p> </p>
<marquee loop="2" bgcolor="#CCCCCC">我只走两次哦</marquee>
Copy after login

scrollamount

Set the scrolling of active subtitles Speed, unit pixels

The code is as follows:

<marquee scrollamount="10" >scrollamount="10" </marquee>
<marquee scrollamount="20" >scrollamount="20" </marquee>
<marquee scrollamount="30" >scrollamount="30" </marquee>
Copy after login

##scrolldelay

Set active subtitle scrolling Delay time between two times, unit millisecond (millisecond)

If the value is large, it will have the effect of one step and one pause.

The code is as follows:

<marquee scrolldelay="10" >scrolldelay="10" </marquee>
<marquee scrolldelay="100" > scrolldelay="100"</marquee>
<marquee scrolldelay="1000">scrolldelay="1000" </marquee>
Copy after login

The above is the detailed explanation of the marquee attribute in HTML introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

For more detailed articles related to the marquee attribute in HTML, please pay attention to the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template