Web page HTML code: production of scrolling text
|
In this section, the author describes the special tags in HTML code, which can make the text in the web page scroll and control its scrolling properties. Creating scrolling text Through the previous learning in this chapter, readers have been able to control the display of various paragraph texts very well, but no matter how to set it, the text is static. In this section, the author describes the special tags in HTML code, which can make the text in the web page scroll and control its scrolling properties. 4.3.1 Setting text scrolling The method of making text scroll in HTML technology is to use the double tags <marquee></marquee>. In the HTML code, the text in the affected area can be scrolled. By default, it scrolls from right to left in a circular manner. 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 settings: mar.htm <html> <head> <title>Text scrolling settings</title> </head> <body> <font size="5" color="#cc0000"> Text scrolling example (default): <marquee>Be kind</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 Setting the default form of text scrolling As can be seen from Figure 4.15, when the width is not set, the <marquee></marquee> tag occupies a single line. 4.3.2 Set the scrolling direction of text The direction attribute of the <marquee></marquee> tag is used to set the content scrolling direction. The attribute values are left, right, up, and down, which represent left, right, up, and down respectively. For example, the following code: <marquee direction="left">Be a kind person</marquee> <marquee direction="right">Be a kind person</marquee> <marquee direction="up">Be a kind person</marquee> <marquee direction="down">Be a kind person</marquee> 4.3.3 Set the speed and form of text scrolling <br />To set text scrolling, use the <marquee></marquee> tag, and its properties are described as follows. — The scrollamount attribute of the <marquee></marquee> tag is used to set the content scrolling speed. — The behavior attribute of the <marquee></marquee> tag is used to set the content scrolling mode. The default value is scroll, which means circular scrolling. When its value is alternate, the content will scroll back and forth in a loop. When its value is slide, the content scrolls once and then stops without looping. There is also a loop attribute to set the number of scrolling loops, which defaults to unlimited. — The scrolldelay attribute of the <marquee></marquee> tag is used to set the time interval for content scrolling. — The bgcolor attribute 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 attribute of the <marquee></marquee> tag is used to set the content scrolling 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>Text scrolling settings</title> </head> <body> <font size="3" color="#cc0000"> Text scrolling example (default): <marquee>Be kind</marquee> Text scrolling example (right): <marquee direction="right" scrolldelay="500">Be kind</marquee> Text scrolling example (downward, scrolling mode is slide, speed is 10): <marquee scrollamount="10" behavior="slide">Be kind</marquee> Text scrolling example (default direction, scrolling mode is alternate, loop 3 times, speed is 2): <marquee scrollamount="2" behavior="alternate" loop="3">Be kind</marquee> Text scrolling example (upward, background color is #CCFF66, background width and height are set): <marquee direction="up" bgcolor="#CCFF66" width="250" height="55">Be kind</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 easily create scrolling text. In the following JavaScript learning, readers will continue to deepen their study of the dynamic behavior of the <marquee></marquee> tag. |
<<: About the use of Vue v-on directive
>>: How to install FastDFS in Docker
Recommend
MySQL 8.0.18 deployment and installation tutorial under Windows 7
1. Preliminary preparation (windows7+mysql-8.0.18...
Design a simple HTML login interface using CSS style
login.html part: <!DOCTYPE html> <html l...
How Web Designers Create Images for Retina Display Devices
Special statement: This article is translated bas...
Tips for importing csv, excel or sql files into MySQL
1. Import csv file Use the following command: 1.m...
UDP simple server client code example
I won’t go into details about the theory of UDP. ...
Detailed explanation of the initial use of Promise in JavaScript asynchronous programming
1. Overview The Promise object is a specification...
Analysis of the reasons why MySQL field definitions should not use null
Why is NULL so often used? (1) Java's null Nu...
Usage and scenario analysis of npx command in Node.js
npx usage tutorial Tonight, when I was learning V...
Uninstalling MySQL database under Linux
How to uninstall MySQL database under Linux? The ...
Detailed tutorial on running selenium+chromedriver on the server
1. Introduction I want to use selenium to scrape ...
How to deeply understand React's ref attribute
Table of contents Overview 1. Creation of Refs ob...
How to create and run a Django project in Ubuntu 16.04 under Python 3
Step 1: Create a Django project Open the terminal...
Implementation of Docker packaging image and configuration modification
I have encountered many problems in learning Dock...
A brief introduction to the usage of decimal type in MySQL
The floating-point types supported in MySQL are F...
Example code for implementing dotted border scrolling effect with CSS
We often see a cool effect where the mouse hovers...