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

React Principles Explained

Table of contents 1. setState() Description 1.1 U...

MySQL's conceptual understanding of various locks

Optimistic Locking Optimistic locking is mostly i...

How to connect Navicat to the docker database on the server

Start the mysql container in docekr Use command: ...

How to use mysqldump to backup MySQL data

1. Introduction to mysqldump mysqldump is a logic...

Why is UTF-8 not recommended in MySQL?

I recently encountered a bug where I was trying t...

How to set up swap partition SWAP in Linux 7.7

The Swap partition of the Linux system, that is, ...

Vue+Element realizes paging effect

This article example shares the specific code of ...

Detailed explanation of Grid layout and Flex layout of display in CSS3

Gird layout has some similarities with Flex layou...

Centos7 installation and configuration of Mysql5.7

Step 1: Get the MySQL YUM source Go to the MySQL ...

XHTML Getting Started Tutorial: XHTML Web Page Image Application

<br />Adding pictures reasonably can make a ...

Pure HTML+CSS to achieve Element loading effect

This is the effect of the Element UI loading comp...

Native JS to implement the aircraft war game

This article example shares the specific code of ...