一、标签<marquee>简介
通过开始标签<marquee>和结束标签</marquee>的共同配合而实现滚动效果,<marquee>滚动的内容</marquee>,滚动内容可以是超链接、图片、文字或者表格。
二、标签属性
1.behavior 行为属性有三个值 alternate、scroll、slide
- alternate 来回交替滚动(方向属性对此不做限制)<marquee behavior="alternate">滚动内容</marquee>
- scroll 循环滚动默认效果
- slide 只滚动一次就停止
2.direction 方向属性有四个值 up、down、right、left
- 例如:up 自下往上 <marquee direction="up">滚动内容</marque>
3.scrollamount 滚动速度,即每次滚动时候的长度,以像素(pixel)为单位
- 例如<marquee scrollamount="4">滚动内容</marquee>
4.scrolldelay 滚动的时间间隔,单位是毫秒(1秒=1000毫秒)
- 例如<marquee scrolldelay="1000">滚动内容</marquee>
5.width、height 分别是 滚动区域的宽度和高度
- 例如<marquee width="300" height="100">滚动内容</marquee>
6.bgcolor 设置滚动区域的背景颜色,可以直接设置颜色英文(blue),也可以是十六进制颜色(#ff00ff)
- 例如<marquee bgcolor="#ff0000 / blue">滚动内容</marquee>
7.hspace、vspace 空白空间
- hspace设定活动字幕所在位置距离父容器水平边框的距离 horizontal(水平) space
- vspace设定活动字幕所在位置距离父容器垂直边框的距离 vertical(垂直) space
- 例如<marquee hspace="20" vspace="40">滚动内容</marquee>
8.loop 设定滚动的次数,当loop=-1时,表示一直滚动下去,默认值为-1
- 例如<marquee loop="-1">一直滚动下去</marquee> <marquee loop="2">只滚动两次</marquee>
三、事件
1.onMouseOut="this.start()" 表示当鼠标移开时开始滚动
2.onMouseOver="this.stop()" 表示当鼠标移入该区域时停止滚动
- 例如 <marquee onMouseOut="this.start()" onMouseOver="this.stop()" width="222" height="222">滚动内容</marquee>
- (涉及到一个驼峰命名法的规则)
四、示例代码
1.滚动一个超链接
<marquee><a href="http://baidu.com"></a></marquee>
2.滚动一个图片
<marquee><img src="1.jpg"></marquee>
3.一个完整的滚动实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>滚动</title>
</head>
<body>
<marquee behavior="alternate" direction="right" width="300" height="100" bgcolor="#ff00ff" scrollamount="50" scrolldelay="1000" hspace=50 vspace=50 onmouseover="this.stop()" onmouseout="this.start()" loop="2">滚动内容
</marquee>
</body>
</html>
参考:叶落无痕123 https://blog.csdn.net/u012767761/article/details/75142470