【前端】HTML标签marquee实现滚动效果

2017-06-02 0 条评论 1.34k 次阅读 1 人点赞

今天弄公司论坛,论坛顶部有一个类似广播通知的栏目,需要多广播滚动起来,第一想法是可以用javascript来实现,不过在翻看html手册时发现了一个html标签 :<marquee></marquee>,这个标签可以实现多种滚动效果,不需要写额外的javascript代码。

marquee标签不仅可以移动文字,也可以移动图片,表格等页面元素。

写法:<marquee>要进行滚动的内容</marquee>

<marquee>...</marquee>的属性:

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

写法:<marquee direction="滚动方向">...</marquee>

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

写法:<marquee behavior="scroll">...</marquee>,表示循环滚动

3.滚动速度:scrollamount(滚动速度是设置每次滚动的长度,以px为单位)

写法:<marquee scrollamount="5">...</marquee>,表示每次滚动五个px

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

写法:<marquee scrolldelay="100">...</marquee>,表示每隔0.1秒(100毫秒)滚动一下

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

写法:<marquee loop="2">...</marquee>,表示循环滚动两次

6.滚动范围width、height

写法:<marquee width="20px" height="20px">...</marquee>

7.滚动背景颜色bgcolor

写法:<marquee bgcolor="red">...</marquee>

8.空白空间hspace、vspace

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Demo of marquee</title>
</head>
<body>
	<marquee direction='up' scrollamount="3" loop="infinite" height="16px" scrolldelay="500">
		<a href="https://qingwei.tech">清渭技术小站</a></br>
		<a href="https://qingwei.tech">清渭技术小站</a></br>
		<a href="https://qingwei.tech">清渭技术小站</a>
	</marquee>
</body>
</html>

PS:如果你觉得本站内容对你有帮助,不如把本站收藏到你的收藏夹,以便下次查看~也欢迎在下方分享点赞以及发言讨论~

Kiwi

Valar Morghulis

文章评论(0)