In this section, the author talks about the more special tags in HTML code, which can make text in web pages scroll and control its scrolling properties.
Make scrolling text
Through the previous study of this chapter, readers can already control the display of various paragraph texts well, but no matter how they are set, the text is static. In this section, the author talks about the more special tags in HTML code, which can make text in web pages scroll and control its scrolling properties.
4.3.1 Set text scrollingThe way to scroll text in HTML technology is to use double tags <marquee></marquee>. In HTML code, the text in its function area can be scrolled, and the default is to scroll from right to left, loop. Create a web page file in 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
<html>
<head>
<title>Settings for text scrolling</title>
</head>
<body>
<font size=5 color=#cc0000>
Text scrolling example (default): <marquee>Be kind to be a person</marquee>
</font>
</body>
</html>
Enter http://localhost/mar.htm in the browser address bar, and the browsing effect is shown in Figure 4.15.
Figure 4.15 Set the default form of text scrolling
From Figure 4.15, when the width is not set, the <marquee></marquee> tag is exclusive to one line.
4.3.2 Set the direction of text scrollingThe direction attribute of the <marquee></marquee> tag is used to set the content scrolling direction. The attribute values include left, right, up, and down, which represent left, right, up, and down, respectively. For example, the following code:
<marquee direction=left>Be kind to be a person</marquee>
<marquee direction=right>Be kind to be a person</marquee>
<marquee direction=up>Be kind to be a person</marquee>
<marquee direction=down>Be kind to be a person</marquee>
4.3.3 Set the speed and form of text scrollingSet text scrolling to use the <marquee></marquee> tag, and its attributes are described as follows.
— 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. The default is scrolling, that is, looping. When its value is alternate, the content will loop back and forth. When its value is slide, the content will stop scrolling once and will not loop. There is also a loop property that sets the number of scrolling cycles, which defaults to no limit.
— The scrolldelay property of the <marquee></marquee> tag 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 background color setting of the body).
— The width property of the <marquee></marquee> tag is used to set the content scroll background width.
— The height attribute of the <marquee></marquee> tag is used to set the content scrolling background height.
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
<html>
<head>
<title>Settings for text scrolling</title>
</head>
<body>
<font size=3 color=#cc0000>
Text scrolling example (default): <marquee>Be kind to be a person</marquee>
Text scrolling example (to the right): <marquee direction=right scrolldelay=500>Be kind to be a person</marquee>
Example of text scrolling (downward, scrolling method is slide, speed is 10): <marquee scrollamount=10 behavior=slide>Be kind to be a person</marquee>
Example of text scrolling (default direction, scrolling method is alternate, loop 3 times, speed is 2): <marquee scrollamount=2 behavior=alternate loop=3>Be kind to be a person</marquee>
Text scrolling example (upward, background color is #CCFF66, set background width and height): <marquee direction=up bgcolor=#CCFF66 width=250 height=55>Be kind to be a person</marquee>
</font>
</body>
</html>
Enter http://localhost/mar.htm in the browser address bar, and the browsing effect is shown in Figure 4.16.
Figure 4.16 Different forms of text scrolling
The numerous attributes of <marquee></marquee> can be very convenient to create scrolling text. In the subsequent JavaScript learning, readers will continue to deepen the dynamic behavior learning of <marquee></marquee> tags.