Example code for making scrolling text in HTML-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Example code for making scrolling text in HTML

怪我咯

May 07, 2017 am 11:57 AM

html letter scroll

In this section, the author talks about the special tags in HTML code, which can make the text in the web page scroll and control its scrolling properties. Create scrolling text Through the previous studies in this chapter, readers have been able to well control the display method of various paragraph text, but no matter how they are set, the text is static. In this section
In this section, the author talks about special tags in HTML code, which can make the text in the web page scroll and control its scrolling properties.
Create scrolling text
Through the previous studies in this chapter, readers have been able to well control the display mode of various paragraph text, but no matter how they are set, the text is static. In this section, the author describes the special tags in HTML code, which can scroll the text in the web page and control its scrolling properties.
4.3.1 Set text scrolling
The way to scroll text in HTML technology is to use double tags . In the HTML code, the text in the scope can be scrolled. The default is from right to left and circular scrolling. Create a web page file in the D:\web\ directory, name it mar.htm, and write the code as shown in Code 4.15.

Code 4.15 Text scrolling setting: mar.htm

<html>
<head>
 <title>文字滚动的设置</title>
</head>
<body>
<font size="5" color="#cc0000">
文字滚动示例（默认）：<marquee>做人要厚道</marquee>
</font>
</body>
</html>

Copy after login

Enter http://localhost/mar.htm in the browser address bar, the browsing effect is as shown in Figure 4.15 shown.

Figure 4.15 Set the default form of text scrolling
From Figure 4.15, it can be seen that when the width is not set, the label occupies an exclusive line.
4.3.2 Set the direction of text scrolling

<marquee></marquee>标签的direction属性用于设置内容滚动方向，属性值有left、right、up、down，分别代表向左、向右、向上、向下，例如以下代码：
<marquee direction="left">做人要厚道</marquee>
<marquee direction="right">做人要厚道</marquee>
<marquee direction="up">做人要厚道</marquee>
<marquee direction="down">做人要厚道</marquee>

Copy after login

4.3.3 Set the speed and form of text scrolling
Set text scrolling usage tag, its attributes are described as follows.
— The scrollamount attribute of the tag is used to set the content scrolling speed.
— The behavior attribute of the tag is used to set the content scrolling method. The default is scroll, which is cyclic scrolling. When its value is alternate, the content will scroll back and forth in a cyclical manner. When its value is slide, the content will stop scrolling once and will not loop. There is also a loop attribute to set the number of scrolling cycles, which defaults to no limit.
— The scrolldelay attribute of the tag is used to set the time interval for content scrolling.
— The bgcolor attribute of the tag is used to set the content scrolling background color (similar to the background color setting of the body).
— The width attribute of the tag is used to set the width of the content scrolling background.
— The height attribute of the tag is used to set the height of the content scrolling background.
Modify the mar.htm web page file and write the code as shown in code 4.16.

Code 4.16 Text scrolling setting: mar.htm

<html>
<head>
 <title>文字滚动的设置</title>
</head>
<body>
<font size="3" color="#cc0000">
文字滚动示例（默认）：<marquee>做人要厚道</marquee>
文字滚动示例（向右）：<marquee direction="right" scrolldelay="500">做人要厚道</marquee>
文字滚动示例（向下，滚动方式为slide，速度为10）：<marquee scrollamount="10" behavior="slide">做人要厚道</marquee>
文字滚动示例（默认方向，滚动方式为alternate，循环3次，速度为2）：<marquee scrollamount="2" behavior="alternate" loop="3">做人要厚道</marquee>
文字滚动示例（向上，背景色为#CCFF66，设置了背景宽度和高度）：<marquee direction="up" bgcolor="#CCFF66" width="250" height="55">做人要厚道</marquee>
</font>
</body>
</html>

Copy after login

Enter http://localhost/mar.htm in the browser address bar, the browsing effect is as shown in Figure 4.16 shown.

Figure 4.16 Different forms of text scrolling
’s many attributes can make scrolling text very convenient

The above is the detailed content of Example code for making scrolling text in HTML. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn