Home  >  Article  >  Web Front-end  >  HTML标签marquee实现滚动效果

HTML标签marquee实现滚动效果

WBOY
WBOYOriginal
2016-07-06 13:28:201227browse

页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - 可以实现多种滚动效果,无需js控制。

使用marquee标记不仅可以移动文字,也可以移动图片,表格等.

语法:...; 说明:在标记之间添加要进行滚动的内容。

 

重要属性:

1.滚动方向direction(包括4个值:up、 down、 left和 right)

  语法:...

2.滚动方式behavior(scroll:循环滚动,默认效果; slide:只滚动一次就停止; alternate:来回交替进行滚动)

  语法:...

3.滚动速度scrollamount(滚动速度是设置每次滚动时移动的长度,以像素为单位)

  语法:...

4.滚动延迟scrolldelay(设置滚动的时间间隔,单位是毫秒)

  语法:...

5.滚动循环loop(默认值是-1,滚动会不断的循环下去)

  语法:...

6.滚动范围width、height

7.滚动背景颜色bgcolor

8.空白空间hspace、vspace

 

<!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>

  

 

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