HTML scrolling Text Code marquee tags

Source: Internet
Author: User

<marquee style= "WIDTH:388PX; height:200px "scrollamount=" 2 "direction=" Up ">
<div align= "left" ><br/>
</div >
<center ><font face= "blackbody" color= "#008000" size= "4" ></font ></center >
<div align= "left" ><br/>
</div >
<center >
<p ><font color= "#ff6600" size= "4" > Scrolling text </font ></p >
<p ><font color= "#ff4500" size= "4" > Scrolling text </font ></p >
<p ><font color= "#ff3300" size= "4" > Scrolling text </font ><br/>
<br/>
</p >
</marquee >

Marquee Parameters:
BGColor: Scrolls the background color of the text box.
Direction: Scrolling direction setting, selectable left (right to Ieft), Rightup (bottom to top), anddown (top to bottom)
Scrolldelay: The lag time between each round of scrolling, the larger the number, the slower the scrolling.
ScrollAmount: The total amount of time to scroll, the smaller the number, the slower the scrolling.
Behaviour: Scrolling mode setting, three values: Scroll (circular scrolling) lide ( slide in, single scroll), Alternate (scroll back and forth).
Align: Text alignment settings, selectable middle (centered), Bottom (upper), or Top (home).
Width: Scroll through the text box, enter a value and select in Pixels (by pixels) or in Percent (by percentage) from the following radio box.
Height: Scroll the height of the text box, enter a value and select in Pixels (by pixels) or in Percent (by percentage) from the following radio box.
Loop: Number of scrolls, default = Infinite ( infinity )
Hspace, vspace: Empty line before and after, up and down.

1. Create the First scrolling caption:

Code such as:
<marquee scrollamount=2 width=300> Welcome to the Magic Man Cow Cow Sina Blog! </marquee>
Effects such as:

Welcome to The Magic Man Cow Cow Sina Blog!

2. Detailed Parameters:
a) scrollamount. Represents speed, the higher the value, the faster. Take an integer, the default is 6, the proposal is set to be good.
b) Width and height, which indicates the size of the scrolling area, width is wide, height is high. Especially when doing vertical scrolling, be sure to set the height value.
c) direction. Represents the direction of scrolling, which defaults to right-to-left: ←←←. The optional values are right, down, up. The scrolling direction is: Right means →→→,up represents ↑,down ↓.
d) Scrolldelay, which is also used to control the speed, take an integer, the default is 90, the greater the value, the slower the speed. Usually the scrolldelay is not required to be set.
e) behavior. Use it to control properties, default to circular scrolling, optional values are alternate (alternating scrolling), slide (slide effect, refers to scrolling once, and then stops scrolling)

3. Example:
A) Add hyperlinks to scrolling captions.

This is exactly the same as the usual hyperlinks. Just add <a href=***> and </a> on the outside of the text.

Code such as:

<marquee scrollamount=2 width=300><a href=http://www.sina.com.cn/> Sina Home </a></marquee>

Effects such as:

Sina homepage

Click on "Sina homepage" to enter:

b) When the mouse rests on the text, the text stops scrolling.
Code such as:
<marquee scrollamount=2 width=300 onmouseover=stop () Onmouseout=start () > Welcome to the Magic Man Cow Cow Sina Blog! </marquee>
Effects such as:
Welcome to The Magic Man Cow Cow Sina Blog!

c) alternating effect.

Code such as:
<marquee scrollamount=2 width=99 behavior=alternate> Welcome to the Magic Man Cow Cow Sina Blog! </marquee>
Effects such as:
Welcome to The Magic Man Cow Cow Sina Blog!


D) Multiple lines of text scroll up.

Code such as:
<marquee scrollamount=2 width=300 height=160 direction=up> Hello! <br> Welcome to the Magic Man Cow Cow Sina Blog! <br> This is a multi-line text up-scrolling code. <p> <a href=http://www.sina.com.cn/> Sina Home </a></marquee>
Effects such as:
Hello
• Welcome to The Magic Man Cow Cow Sina Blog!

• This is a multi-line text up-scrolling code.
• Sina Home


If the page has been edited in FrontPage, it can only scroll one line after it has been saved, and the original code order has changed. The solution is to find the original code, embed it in JavaScript's document.write, and write this code as:
<script>document.write (' <marquee scrollamount=2 width=300 height=160 direction=up> Hello! <br> Welcome to the Magic Man Cow Cow Sina Blog! <br> This is a multi-line text up-scrolling code. <p> <a href=http://www.sina.com.cn/> Sina Home </a></marquee> ') </script>

e) Use the style sheet to control the color of the scrolling caption.

Code such as:

<marquee scrollamount=2 Width=300><a style=color:cc6600> Welcome to the Magic Man Cow Cow Sina blog </a></marquee>.
Welcome to The Magic Man Cow Cow Sina Blog!


Picture scrolling
Use statement. And should pay attention to the picture name not Chinese, should pay attention to distinguish English case.

Pictures do hyperlinks
Use <a href=> and </a> to surround , and IMG must be set border=0, otherwise the picture will appear in the Blue box.

The correct examples are as follows:

<a href=http://www.sina.com.cn/></a>
Where a href= represents a hyperlink, which is most commonly used. The practice of the method is also very simple, is usually used FP or DW to do the Web page, to view the source code more.

Multiple Picture arrangement scrolling
Usually the picture and the picture are linked with <br> (back line) or <p style=margin-top:9> (the distance between the pictures is precisely adjusted). You can also put your picture in a table layout, and then add all the statements of this table into the marquee, let this table to scroll.
Code such as:

<script>document.write (' <marquee scrollamount=2 width=340 height=160 direction=up onmouseover=stop () Onmouseout=start () ><a href=http://www.sina.com.cn/></a></marquee> ') </script>

HTML scrolling Text Code marquee tags

Related Article

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.