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

MySQL 1130 exception, unable to log in remotely solution

Table of contents question: 1. Enable remote logi...

Vue implements dynamic query rule generation component

1. Dynamic query rules The dynamic query rules ar...

A brief discussion on the VUE uni-app life cycle

Table of contents 1. Application Lifecycle 2. Pag...

How to Understand and Identify File Types in Linux

Preface As we all know, everything in Linux is a ...

vue3+ts+EsLint+Prettier standard code implementation

Table of contents use Use of EsLint Add a profile...

Detailed explanation of JS ES6 coding standards

Table of contents 1. Block scope 1.1. let replace...

Solve the problem when setting the date to 0000-00-00 00:00:00 in MySQL 8.0.13

I just started learning database operations. Toda...

Detailed explanation of the difference between tags and elements in HTML

I believe that many friends who are new to web pag...

What is ssh port forwarding? What's the use?

Table of contents Preface 1. Local port forwardin...

Summary of methods for querying MySQL user permissions

Introduce two methods to view MySQL user permissi...

Native js to realize bouncing ball

On a whim, I wrote a case study of a small ball b...

Markup Language - Image Replacement

Click here to return to the 123WORDPRESS.COM HTML ...

Problems with using wangeditor rich text editing in Vue

wangEditor is a web rich text editor developed ba...