A simple way to achieve scrolling effect with HTML tag marquee (must read)

A simple way to achieve scrolling effect with HTML tag marquee (must read)

The automatic scrolling effect of the page can be achieved by JavaScript, but today I accidentally discovered an HTML tag - <marquee></marquee> which can achieve a variety of scrolling effects without JS control.

The marquee tag can be used to move not only text, but also images, tables, etc.

Syntax: <marquee>...</marquee>; Description: Add the content to be scrolled between the tags.

Important properties:

1. Scroll direction (including 4 values: up, down, left and right)

Syntax: <marquee direction="scroll direction">...</marquee>

2. Scrolling behavior (scroll: scroll in a loop, the default effect; slide: scroll once and then stop; alternate: scroll back and forth alternately)

Syntax: <marquee behavior="scroll mode">...</marquee>

3. Scroll speed scrollamount (scroll speed is to set the length of movement each time you scroll, in pixels)

Syntax: <marquee scrollamount="5">...</marquee>

4. Scroll delay scrolldelay (set the scrolling time interval in milliseconds)

Syntax: <marquee scrolldelay="100">...</marquee>

5. Scroll loop (the default value is -1, the scroll will continue to loop)

Syntax: <marquee loop="2">...</marquee>

6. Scroll range width, height

7. Scrolling background color bgcolor

8. Blank space hspace, vspace

Code example:

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
  2. < html   xmlns = "http://www.w3.org/1999/xhtml" >   
  3. < head >   
  4. < meta   http-equiv = "Content-Type"   content = "text/html; charset=utf-8"   />   
  5. < title > Untitled Document </ title >   
  6. </ head >   
  7.   
  8. < body >   
  9. < div >   
  10. < marquee   direction = "up"   behavior = "scroll"   scrollamount = "1"   scrolldelay = "0"   loop = "-1"   width = "1000"   height = "50"   bgcolor = "#0099FF"   hspace = "10"   vspace = "10" >   
  11. Refers to the alignment of the entire Marquee; (2) behavior: Set the scrolling method: scroll: means scrolling from one end to the other, it will repeat, but the disadvantage is that it cannot scroll seamlessly. Slide: means scrolling from one end to the other without repeating...
  12. </ marquee >   
  13. </ div >   
  14. </ body >   
  15. </ html >   

The above is all the content of the simple method (must read) of using HTML tag marquee to achieve scrolling effect. I hope you like it~

<<:  A brief discussion on the issue of element dragging and sorting in table

>>:  How to set remote access permissions in MySQL 8.0

Recommend

Introduction to the B-Tree Insertion Process

In the previous article https://www.jb51.net/arti...

Detailed explanation of nginx reverse proxy webSocket configuration

Recently, I used the webSocket protocol when work...

Example of horizontal arrangement of li tags in HTMl

Most navigation bars are arranged horizontally as...

TypeScript union types, intersection types and type guards

Table of contents 1. Union Type 2. Crossover Type...

MySql5.7.21 installation points record notes

The downloaded version is the Zip decompression v...

Docker nginx implements one host to deploy multiple sites

The virtual machine I rented from a certain site ...

js to implement verification code interference (dynamic)

This article example shares the specific code of ...

Management of xinetd-based services installed with RPM packages in Linux

Table of contents Preface 1. Startup management b...

Various methods to implement the prompt function of text box in html

You can use the attribute in HTML5 <input="...

How to use stored procedures in MySQL to quickly generate 1 million records

Preface When testing, in order to test the projec...

Import backup between mysql database and oracle database

Import the data exported from the Oracle database...

Introduction and use of five controllers in K8S

Table of contents Controller type of k8s Relation...

JavaScript uses promise to handle multiple repeated requests

1. Why write this article? You must have read a l...