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
Keep-alive multi-level routing cache problem in Vue
Table of contents 1. Problem Description 2. Cause...
Analysis of the use and principle of Docker Swarm cluster management
Swarm Cluster Management Introduction Docker Swar...
Use .Htaccess to prevent malicious IP attacks on websites, prohibit access to specified domain names, prohibit machine crawlers, and prohibit hotlinking
A few days ago, I discovered that my website was ...
JavaScript to achieve a simple countdown effect
This article example shares the specific code of ...
In html, set the scroll bar to automatically display when the content in the div exceeds
In HTML pages, we sometimes need to automatically ...
Detailed explanation of how to build a CDN server with Nginx (picture and text)
Using Nginx's proxy_cache to build a cache se...
Explanation of MySQL index types Normal, Unique and Full Text
MySQL's index types include normal index, uni...
Detailed explanation of how to access MySQL database remotely through Workbench
Preface Workbench is installed on one computer, a...
How to implement interception of URI in nginx location
illustrate: Root and alias in location The root d...
How to create a Pod in Kubernetes
Table of contents How to create a Pod? kubectl to...
Implementation of form submission in html
Form submission code 1. Source code analysis <...
Use iframe to display weather effects on web pages
CSS: Copy code The code is as follows: *{margin:0;...
A brief discussion on the VUE uni-app development environment
Table of contents 1. Through HBuilderX visual int...
The correspondence between Tomcat and JDK versions and the features of each Tomcat version
Apache Tomcat is an open source software that imp...
Example code of how to create a collapsed header effect using only CSS
Collapsed headers are a great solution for displa...