Marquee in HTML

Source: Internet
Author: User

Syntax:

<Marquee> </marquee>

The following is a simple example:

The Code is as follows:

<Marquee> <font size = + 3 color = Red> Hello, world </font> </marquee>

The following two events are frequently used:

OnMouseout = "This. Start ()": used to set the scroll continued when the mouse 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 scroll on when the mouse moves out of the area.Mouseover = "this. Stop ()": Used to stop scrolling when the mouse moves into this area </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 ()">

This is a complete example.

</Marquee>

The tag supports up to 11 attributes:

Align

Set the alignment of <marquee> tag content

Absbottom: absolute bottom alignment (alignment to the bottom of letters such as G and P)

Absmiddle: absolute central alignment

Baseline: Bottom Line alignment

Bottom: Bottom alignment (default)

Left: Left alignment

Middle: center alignment

Right: Right

Texttop: Top Line alignment

Top: Top alignment

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 central alignment. </Marquee>

<Marquee align = "baseline"> align = "baseline": Bottom Line alignment. </Marquee>

<Marquee align = "bottom"> align = "bottom": Bottom alignment (default ). </Marquee>

<Marquee align = "Left"> align = "Left": Left-aligned. </Marquee>

<Marquee align = "Middle"> align = "Middle": center alignment. </Marquee>

<Marquee align = "right"> align = "right": Right-aligned. </Marquee>

<Marquee align = "texttop"> align = "texttop": Top Line alignment. </Marquee>

<Marquee align = "TOP"> align = "TOP": Align the top. </Marquee>

BehaVior

Set the scroll mode:

Alternate: Indicates rolling back and forth between the two ends.

Scroll: indicates that the scroll from one end to the other will be repeated.

Slide: Scroll from one end to the other end without repeating.

The Code is as follows:

<Marquee behavior = "alternate"> Alternate: Indicates rolling back and forth between the two ends. </Marquee>

<Marquee behaVior = "scroll"> scroll: indicates that the scroll from one end to the other will be repeated. </Marquee>

<Marquee behaVior = "slide"> slide: Scroll from one end to the other end without repeating. </Marquee>

Bgcolor

Set the background color of an active subtitle. The background color can be set in RGB, hexadecimal format, or color name.

The Code is as follows:

<Marquee bgcolor = "#006699"> set the background color bgcolor = "#006699" </marquee>

<Marquee bgcolor = "RGB (10%, 50%, 100%,)"> set the background color bgcolor = "RGB (10%, 50%, 100%,)" </marquee>

<Marquee bgcolor = "red"> set the background color bgcolor = "red" </marquee>

Direction

Set the scroll direction of the subtitles.

The Code is as follows:

<Marquee direction = "down"> set the scroll direction of the subtitles. Direction = "down": Down </marquee>

<Marquee direction = "Left"> set the scroll direction of the subtitles. Direction = "Left": Left </marquee>

<Marquee direction = "right"> set the rolling direction of the subtitles. Direction = "right": Right </marquee>

<Marquee direction = "up"> set the rolling direction of the subtitles. Direction = "up": Up </marquee>

Height

Set the height of subtitles

The Code is as follows:

<Marquee Height = "500" direction = "down" bgcolor = "# cccccc"> set the height of an active subtitle = "500" </marquee>

Width

Set the subtitle width.

The Code is as follows:

<Marquee width = "500" bgcolor = "# cccccc"> set the width of an active subtitle to 500 "</marquee>

Hspace

Set the distance from the position of the subtitle to 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

Set the distance from the position of the subtitle to 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>

Loop

Sets the number of scrolling times. When loop =-1 indicates that the scrolling continues, the default value is-1.

The Code is as follows:

<Marquee loop = "-1" bgcolor = "# cccccc"> I will keep walking. </Marquee>

<P> & nbsp; </P>

<Marquee loop = "2" bgcolor = "# cccccc"> I only go twice </marquee>

Scrollamount

Sets the rolling speed of subtitle activity, 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

Sets the delay time between two active subtitle scrolling times. Unit: Millisecond (MS)

If the value is too big, it will take one stop.

The Code is as follows:

<Marquee scrolldelay = "10"> scrolldelay = "10" </marquee>

<Marquee scrolldelay = "100"> scrolldelay = "100" </marquee>

<Marquee scrolldelay = "1000"> scrolldelay = "1000" </marquee>

<Marquee>... </marquee>

Mobile attribute settings, such movement is not limited to text, but can also be applied to images, tables, and so on.

Mouse Properties

OnMouseout = This. Start () ...... scroll out of the mouse

OnMouseover = this. Stop ()...

Direction

<Direction =#>#= left, right, up, down <marquee direction = left> shift from right to left! </Marquee>

Method

<Bihavior =#># = scroll, slide, alternate <marquee behaVior = scroll> around in a circle! </Marquee>

<Marquee behaVior = slide> just take a rest once! </Marquee>

<Marquee behaVior = alternate> back and forth </marquee>

Loop

<Loop =#>#= number of times; if not specified, the loop is not limited to (infinite) <marquee loop = 3 width = 50% behaVior = scroll> 3 </marquee>

<Marquee loop = 3 width = 50% behaVior = slide> 3 </marquee>

<Marquee loop = 3 width = 50% behaVior = alternate> only 3 trips! </Marquee>

Speed

<Scrollamount = #> <marquee scrollamount = 20> La la! </Marquee>

Latency

<Scrolldelay = #> <marquee scrolldelay = 500 scrollamount = 100> La la! Let's take a step and stop it! </Marquee>

Layout settings

Align)

<Align =#>#= top, middle, bottom <font size = 6>

<Marquee align = # width = 400> La la, I will move it! </Marquee>

</Font>

Background Color

<Bgcolor = #>#= rrggbb hexadecimal digital, or the following predefined colors:

Black, Olive, teal, red, blue, maroon, navy, gray, lime,

Fuchsia, white, green, purple, silver, yellow, Aqua <marquee bgcolor = aaaaee> color! </Marquee>

Area

<Height = # width =#> <marquee Height = 40 width = 50% bgcolor = aaeeaa> area! </Marquee>

Blank

(Margins)

<Marquee hspace = 20 vspace = 20 width = 150 bgcolor = ffaaaa align = middle> area! </Marquee>

</P>

<Marquee id = "iescroller" direction = left Height = 10 onMouseout = start (); onMouseover = stop (); scrollamount = 2 scrolldelay = 10 scrollleft = "0" scrolltop = "0" behavior = "alternate" bgcolor = "#999999" style = "color: # ffffff; font-size:
14; font-family: 'body', 'arial', 'helvetica ', 'sans-serif '"Title = text content> This is an image to put text or to move (the image can be inserted with the INSERT command when the cursor is placed here) </marquee> </P>

Rolling attribute parameters of marquee

From <marquee> to </marquee>, there are many parameters. In fact, friends still use a lot of applications to scroll up images, which are often used, the following describes the attributes of this webpage parameter;

Scroll parameters:

1: direction: Direction

Left --- left (default)

Right --- Right

Up ------ up

Down ---- bottom

2: Method: behaVior

Scroll ------- scroll around (default)

Slide --------- scroll once

Alternate ----- scroll back and forth

3: Times: loop

When loop =-1 or loop = infinite, it indicates that text scrolling is an infinite loop (default)

4: Speed: scrolldelay

Any natural integer

5: Align

Top --------- alignment top

Middle ------ align the center

Bottom ------ align bottom

6: move the mouse over and off

OnMouseover = this. Stop (); onMouseout = This. Start ();

Click to stop scrolling. Exit and continue rolling

With the above parameters. We can easily create any scrolling Method for a logo image, for example:

<Marquee width = 120 Height = 200 direction = up behaVior = alternate scrolldelay = 120 align = middle onMouseover = this. Stop (); onMouseout = This. Start ();> <a href = http://qjpz.com> <marquee>

It is easy to compare. This is a code with a scroll speed of 120mm. It returns and alignment from the bottom to the top of the wall, stops when you move the mouse over the icon, and clicks the icon to go back and forth to the qianniu forum.

Scroll subtitles on the background image

<Table width = "500" border = 0>

<Tbody>

<Tr>

<TD background = specifies the background image address Height = 250>

<P> <marquee scrollamount = 2 scrolldelay = 50 ction = up width = 200 Height = 200 behaVior = scroll> text to be rolled </marquee> </P> </TD> </tr> </tbody> </table> </div>

Parameter settings:

A) scrollamount indicates the speed. The greater the value, the faster the speed. If you do not have it, the default value is 6. We recommend that you set it to 1 ~ 3 is better

B) scrolldelay is also used to control the speed. It indicates the stop and stop. The default value is 90. The larger the value, the slower the speed. Generally, scrolldelay does not need to be set.

C) direction is obviously the direction of scrolling. The default value is "scroll from right to left". Therefore, this parameter is not required if scrolling to left. Other optional values include right, down, and up. The scroll direction is "right", "up", and "down" respectively.

D) width and height indicate the size of the rolling area, width indicates the width, and height indicates the height. Especially when performing vertical scrolling, you must set the height value.

E) behaVior is used to control the scroll attribute. The default value is scroll. Similarly, this parameter is not required if it is a circular scroll. Other optional values include alternate and slide ).

F) <font color = #990066 size = 4 face => and </font> define the color, size, and font of each line, if this is not required, just remove the code.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.