Home > Developer > Web Develop
This section describes the special tags in HTML code that can make text in a Web page scroll and control its scrolling properties.
Make scrolling text
Through the earlier chapter of the study, the reader has been able to control the various paragraph text display, but no matter how to set, the text is static. This section describes the special tags in HTML code that can make text in a Web page scroll and control its scrolling properties.
4.3.1 Setting text scrolling
The way to make text scrolling in HTML technology is to use double-label <marquee></marquee>. In HTML code, you can scroll through its area of text, from right to left by default. Create a Web page file under the D:\web\ directory, named Mar.htm, and write the code as shown in code 4.15.
Code 4.15 text scrolling settings: mar.htm
<title> Settings for text scrolling </title>
<body>
<font size= "5" color= "#cc0000" >
Text scrolling example (default):<marquee> to be kind </marquee>
</font>
</body>
Enter http://localhost/mar.htm in the browser address bar, as shown in effect 4.15.
Figure 4.15 Setting the text scrolling default form
As you can get from Figure 4.15, the,<marquee></marquee> label is exclusive on a single line when the width is not set.
4.3.2 Setting the direction of text scrolling
The direction property of the <marquee></marquee> tag is used to set the direction of content scrolling, with the property values left, right, up, and down, respectively, representing the following code, which is the same as:
<marquee direction= "Left" > be honest </marquee>
<marquee direction= "Right" > be honest </marquee>
<marquee direction= "Up" > Be honest </marquee>
<marquee direction= "Down" > Be honest </marquee>
4.3.3 Set the speed and form of text scrolling
Set text scrolling using the <marquee></marquee> tab whose properties are described below.
The ScrollAmount property of the-<marquee></marquee> tag is used to set the content scrolling speed.
The Behavior property of the-<marquee></marquee> tag is used to set the content scrolling method, which defaults to scroll, which is circular scrolling, and when its value is alternate, the content loops back and forth. When its value is slide, the content scrolls once and stops, not looping. There is also a loop property that sets its number of scrolling cycles and defaults to No limit.
The Scrolldelay property of the-<marquee></marquee> label is used to set the time interval for content scrolling.
The bgcolor property of the-<marquee></marquee> tag is used to set the content scrolling background color (similar to the body's background color setting).
The-<marquee></marquee> label's width property is used to set the content scrolling background width.
The height property of the-<marquee></marquee> label is used to set the content scrolling background altitude.
Modify the Mar.htm Web page file and write the code as shown in code 4.16.
Code 4.16 Text scrolling settings: mar.htm
<title> Settings for text scrolling </title>
<body>
<font size= "3" color= "#cc0000" >
Text scrolling example (default):<marquee> to be kind </marquee>
Text scrolling example (right): <marquee direction= "scrolldelay=" > being Honest </marquee>
Text scrolling example (down, scroll to Slide, speed): <marquee scrollamount= "behavior=" slide "> Be honest </marquee>
Text scrolling example (default direction, scrolling mode is alternate, loop 3 times, Speed 2): <marquee scrollamount= "2" behavior= "alternate" loop= "3" > Be Kind </ Marquee>
Text scrolling example (up, background color is #ccff66, setting width and height): <marquee direction= "Up" bgcolor= "#CCFF66" width= "+" height= ">" </marquee>
</font>
</body>
Enter http://localhost/mar.htm in the browser address bar, as shown in effect 4.16.
Figure 4.16 Different forms of text scrolling
<marquee></marquee> 's many properties make scrolling text very handy, and in the subsequent JavaScript learning, readers will continue to deepen <marquee></marquee> Dynamic behavioral learning of tags.
HTML has a Control text scrolling label marquee, more useful.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
