HTML tag marquee realizes various scrolling effects (without JS control)

HTML tag marquee realizes various scrolling effects (without JS control)

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

JavaScript 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. <body>
  8. <div>
  9. <marquee direction= "up" behavior= "scroll" scrollamount= "1" scrolldelay= "0" loop= "-1" width= "1000" height= "50" bgcolor= "#0099FF" hspace= "10" vspace= "10" >
  10. 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...
  11. </marquee>
  12. </div>
  13. </body>
  14. </html>

<<:  js native waterfall flow plug-in production

>>:  Detailed explanation of nginx proxy_cache cache configuration

Recommend

An audio-visual Linux distribution that appeals to audiophiles

I recently stumbled upon the Audiovisual Linux Pr...

Usage of if judgment in HTML

In the process of Django web development, when wr...

MySQL detailed single table add, delete, modify and query CRUD statements

MySQL add, delete, modify and query statements 1....

React Synthetic Events Explained

Table of contents Start by clicking the input box...

Axios project with 77.9K GitHub repository: What are the things worth learning?

Table of contents Preface 1. Introduction to Axio...

JavaScript to switch multiple pictures

This article shares the specific code of JavaScri...

Json string + Cookie + localstorage in JS

Table of contents 1.Json string 1.1Json Syntax 1....

An in-depth summary of MySQL time setting considerations

Does time really exist? Some people believe that ...

Linux installation Redis implementation process and error solution

I installed redis today and some errors occurred ...

JS implements a simple todoList (notepad) effect

The notepad program is implemented using the thre...

The concrete implementation of JavaScript exclusive thinking

In the previous blog, Xiao Xiong updated the meth...