简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

HTML code to create scrolling text

不言
Release： 2018-05-07 16:13:01
Original
5228 people have browsed it

This article mainly introduces the HTML code to produce scrolling text. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

In this section, the author talks about the special features of HTML code. Tag, which can scroll the text in the web page 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, 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 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, and the browsing effect is as shown in Figure 4.15.

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
The direction attribute of the tag is used to set the direction of content scrolling. The attribute values ​​are left, right, up, and down. , representing left, right, up, and down respectively, such as the following code:
Be kind
Be kind
Be kind
Be kind
4.3.3 Set the speed and form of text scrolling
To set text scrolling, use the tag, and 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 content scrolling background width.
— 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, and the browsing effect is as shown in Figure 4.16.

Figure 4.16 Different forms of text scrolling
’s many properties can make scrolling text very convenient. In the following JavaScript learning, readers will continue to deepen Dynamic behavioral learning of tags.

Related recommendations:

HTML code to implement a simple shopping cart


##

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

Related labels：
html letter scroll
source：php.cn
Previous article：Create a simple and beautiful login page in Html Next article：The Chinese garbled problem of html files and the display problem in the browser
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
Latest Articles by Author
Latest Issues
PX automatic conversion to REM error  <style>html {   font-size: calc(100vw / 3.75);      }...
From 2024-04-16 09:34:16
0
0
4687
The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
From 2024-04-06 21:58:04
0
1
800
How to solve the mysterious white space at the bottom of the page in CSS I'm trying to build a simple webpage using Bootstrap and D3, but I don't know how to get r...
From 2024-04-06 20:22:15
0
1
454
How to use laravel components with livewire lazy placeholder I want to add the skeleton of my laravel component inside a livewire3 placeholder What I h...
From 2024-04-06 20:02:10
0
2
543
Top-level method to replace a string with HTML code (generated from an array) Given a string like this...$htmlPattern="Usernameis:#name#andusercompanyis#company#&q...
From 2024-04-06 17:40:41
0
2
410
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！