Home >Web Front-end >H5 Tutorial >A simple method to achieve scrolling effect based on HTML tag marquee

A simple method to achieve scrolling effect based on HTML tag marquee

黄舟Original: 2017-03-17 15:08:402023browse

The automatic scrolling effect of the page can be achieved by javascript, but today I accidentally discovered an html tag - ed126914ed1419bab26abf7cf307b7b97204e33a7a23f6efcc788532e245c31bA variety of scrolling effects can be achieved without js control.

Using marqueemarks can not only move text, but also pictures, tables, etc.

Syntax: ed126914ed1419bab26abf7cf307b7b9...7204e33a7a23f6efcc788532e245c31b; Description: Add content to be scrolled between markers.

Important attributes:

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

Syntax: f656a567a7fc24e79093659b8a7f051f...12f8c763e6c7c2a068ed9a2907166a7d. ..7204e33a7a23f6efcc788532e245c31b

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

Syntax: 803bf89a41c47553be5b45800afa3e65.. .7204e33a7a23f6efcc788532e245c31b

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

Syntax: 153370dc92c437739cac39176d0aa63b...7204e33a7a23f6efcc788532e245c31b

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

Syntax: 69457943bcb520c612032510d36031b7...7204e33a7a23f6efcc788532e245c31b

6. Scroll range width , height

7. Scroll background color bgcolor

8. Blank space hspace, vspace

Code example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
<title>无标题文档</title>   
</head>   
   
<body>   
<p>   
<marquee direction="up" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1" width="1000" height="50" bgcolor="#0099FF" hspace="10" vspace="10">   
指整个Marquee对齐方式; (2)behavior:设置滚动的方式: scroll:表示由一端滚动到另一端,会重复,缺陷是不能无缝滚动。 slide:表示由一段滚动到另一端,不会重复...    
</marquee>   
</p>   
</body>   
</html>

The above is the simple method (must see) of the HTML tag marquee that the editor brought to you to achieve the scrolling effect. That’s all, I hope you all like it~

Marquee attribute analysis in HTML

Detailed usage analysis of marquee

Skillfully using the marquee attribute in HTML to achieve dancing text

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Disable input text box input implementation attributesNext article：Disable input text box input implementation attributes

See more

A simple method to achieve scrolling effect based on HTML tag marquee

Related articles