HTML tag marquee implements scrolling effect example code-HTML Tutorial-php.cn

HTML tag marquee implements scrolling effect example code

高洛峰

Release： 2017-03-20 16:58:02

Original

1770 people have browsed it

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

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

Syntax: ...; Description: Add between tags The content to scroll.

Important attributes:

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

Syntax: ...

2. Scroll behavior (scroll: cyclic scrolling, default effect; slide: scroll only once and stop; alternate: scroll alternately back and forth)

Syntax: ...

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

Syntax: ...

4. Scroll delay scrolldelay (set the scrolling interval, unit is milliseconds)

Syntax: ...

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

Syntax: ...

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>
<div>
<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>
</div>
</body>
</html>

Copy after login

The above is the detailed content of HTML tag marquee implements scrolling effect example code. For more information, please follow other related articles on the PHP Chinese website!