HTML Text Scrolling code

Source: Internet
Author: User

HTML Text Scrolling code

Code below <MARQUEE> scrolling text </MARQUEE>

<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: Scroll direction settings, select left, right, up, and down.
Scrolldelay: The delay between each round of scrolling, the larger the slower.
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 (single scroll), Alternate (rolling back and forth).
Align: The alignment setting of the text. You can choose middle (center), Bottom (bottom) 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 is infinite
Hspace, vspace: Empty line before and after, up and down.

Scrolling subtitles can be exciting for a lot of people, especially when using scrolling subtitles for the first time. I've done a lot of scrolling subtitles and I'm not excited about it, so I'm not using it much anymore. A lot of friends often ask how this is done, now do a detailed topic, so that you can get a more comprehensive understanding.
Scrolling subtitles are available in the FrontPage component, but FrontPage can only support single-line text, and it can do nothing with multiple lines of text, and it will only support one line of scrolling! (If there is only one row to scroll, the workaround is to embed this code in the JavaScript document.write, see the detailed description of example D below) Dreamweaver can only use the method of writing HTML code. Therefore, it is highly recommended to use Notepad to open the page source code to edit.

1. Create the first scrolling caption. Code:
<marquee scrollamount=2 width=300> Beautiful scenery line </marquee>
Effects such as: beautiful scenery Line

2. Detailed Parameters:
a) scrollamount. It represents speed, and the greater the value, the faster. If it is not, the default is 6, which is better.
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, the default is 90, the higher 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) How to 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. The following effect, the code is <marquee scrollamount=2 width=300><a href=http://www.cctv.com> CCTV </a></marquee> , click on CCTV to enter:
Cctv

b) How to make the text stop scrolling when the mouse rests on the text?
Code such as:
<marquee scrollamount=2 width=300 onmouseover=stop () Onmouseout=start () > Text content </marquee>
Effects such as:
Text content

c) alternating effect. Code such as:
<marquee scrollamount=2 width=99 behavior=alternate> text content </marquee>
Effects such as:
Text content

D) Multiple lines of text scroll up. Code such as:
<marquee scrollamount=2 width=300 height=160 direction=up> Good morning! <br> The air is so fresh, <br>, are you all right? <p> <a href=http://www.cctv.com> beautiful scenery line </a></marquee>
Effects such as:
• Good morning!
• The air is so fresh.
• Are you okay?
• Beautiful scenery Line

• Note: If your page has been edited in FrontPage, you can only scroll one line after you save it, and then you find that your original code order has changed, My god! 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> Good morning! <br> The air is good and fresh ah <br> are you okay <p> <a href=http://www.cctv.com> beautiful scenery line </a></marquee> ') </script>

e) Change the color of the scrolling subtitles? You can use style sheets to control. The following effect, the code is <marquee scrollamount=2 width=300><a style=color:cc6600> are you okay </a></marquee>.
You okay

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. Correct examples such as:& amp; Lt;a href=http://www.webshu.com></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 <script>document.write (' <marquee scrollamount=2 width=340 height=160 direction=up onmouseover=stop () Onmouseout=start () ><a href=http://www.webshu.com></a></marquee> ') </script>

HTML text Scrolling code (GO)

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.