HTML marquee标签

最新推荐文章于 2024-03-16 12:08:35 发布

原创最新推荐文章于 2024-03-16 12:08:35 发布 · 361 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

知识点专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了 HTML 中的 marquee 标签及其各种属性，包括行为、方向、滚动速度等，并通过实例展示了如何使用这些属性来创建不同的滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

marquee语法
<marquee></marquee>
作用：用来实现滚动效果，无需js控制。
使用marquee标记不仅可以移动文字，也可以移动图片，表格等.

我博客的文字轮播就是marquee做的：

欢迎光临伟伟的学习小站——优快云博客真心祝愿所有关心伟伟博客的朋友们心情愉快！

</marquee>

下面开始学习之旅：

实例一
<marquee>Hello, World</marquee>

marquee常用到的两个事件：
onMouseOut="this.start()" 当鼠标移出该区域时
onMouseOver="this.stop()" 当鼠标移入该区域时

实例二
<marquee onMouseOut="this.start()" onMouseOver="this.stop()">marquee常用到的两个事件</marquee>

下面开始说一下marquee所支持的属性

behavior设定滚动的方式：
alternate：来回滚动。
scroll：重复滚动，默认效果。
slide：不重复滚动，只滚动一次就停止。
代码如下:
<marquee behavior="alternate">来回滚动。 </marquee>
<marquee behavior="scroll">重复滚动。</marquee>
<marquee behavior="slide">不重复滚动。</marquee>

bgcolor设定活动字幕的背景颜色。
代码如下:
<marquee bgcolor="#006699">设定活动字幕的背景颜色</marquee>
<marquee bgcolor="RGB(10%,50%,100%,)">设定活动字幕的背景颜色 </marquee>
<marquee bgcolor="red">设定活动字幕的背景颜色</marquee>

direction设定活动字幕的滚动方向
代码如下:
<marquee direction="down">设定活动字幕的滚动方向向下</marquee>
<marquee direction="left">设定活动字幕的滚动方向向左</marquee>
<marquee direction="right">设定活动字幕的滚动方向向右</marquee>
<marquee direction="up">设定活动字幕的滚动方向向上</marquee>

height设定活动字幕的高度
代码如下:
<marquee height="500" direction="down" bgcolor="#CCCCCC">设定活动字幕的高度</marquee>

width设定活动字幕的宽度
代码如下:
<marquee width="500" bgcolor="#CCCCCC">设定活动字幕的宽度</marquee>

loop设定滚动的次数，当loop=-1表示一直滚动下去，默认为-1
代码如下:
<marquee loop="-1" bgcolor="#CCCCCC">我会不停地走。</marquee>
<marquee loop="2" bgcolor="#CCCCCC">我只走两次哦</marquee>

scrollamount设定活动字幕的滚动速度，单位pixels（像素）
代码如下:
<marquee scrollamount="10" >scrollamount="10" </marquee>
<marquee scrollamount="20" >scrollamount="20" </marquee>
<marquee scrollamount="30" >scrollamount="30" </marquee>

scrolldelay设定活动字幕滚动两次之间的延迟时间，单位millisecond（毫秒）
值大了会有一步一停顿的效果
代码如下:
<marquee scrolldelay="10" >scrolldelay="10" </marquee>
<marquee scrolldelay="100" > scrolldelay="100"</marquee>
<marquee scrolldelay="1000">scrolldelay="1000" </marquee>

空白空间hspace、vspace（像素）
<marquee hspace="水平范围" vspace="垂直范围">···</marquee>

align对齐
<marquee align="absbottom">align="absbottom"：绝对底部对齐（与g、p等字母的最下端对齐）。 </marquee>
<marquee align="absmiddle">align="absmiddle"：绝对中央对齐。 </marquee>
<marquee align="baseline">align="baseline"：底线对齐。 </marquee>
<marquee align="bottom">align="bottom"：底部对齐（默认）。 </marquee>
<marquee align="left">align="left"：左对齐。 </marquee>
<marquee align="middle">align="middle"：中间对齐。 </marquee>
<marquee align="right">align="right"：右对齐。 </marquee>
<marquee align="texttop">align="texttop"：顶线对齐。 </marquee>

<marquee align="top">align="top"：顶部对齐。 </marquee>

marquee 在IE，firefox，chrome ，safari下都能正常的实现走马灯效果，兼容性没有问题

并且两个关键属性scrollamount（滚动速度）direction（滚动方向）

所有浏览器都是支持的

实际上还是有很多效果复杂一点的需要用js去控制：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.lunbo{
position: relative;
width: 600px;
height: 50px;
border:1px solid red;
overflow: hidden;
}
ul{
position:absolute;
left: 0;
top:0;
width: 600px;
height: auto;
}
ul li{
width: 600px;
height: 50px;
line-height: 50px;
font-size:20px;
color:#333;
text-align: center
}
</style>
</head>
<body>
<div class="lunbo">
<ul>
<li>人生在世须尽欢莫使金樽空对月</li>
<li>我寄愁心与明月，随风直到夜郎西</li>
<li>不是花中偏爱菊，此花开尽更无花</li>
<li>辛苦遭逢起一经，干戈寥落四周星</li>
<li>山河破碎风飘絮，身世浮沉雨打萍。</li>
<li>惶恐滩头说惶恐，零丁洋里叹零丁。</li>
<li>人生自古谁无死？留取丹心照汗青。</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script>
function lunbo(id,height){
var ul=$(id);
var liFirst=ul.find('li:first');
$(id).animate({top:height}).animate({"top":0},0,function(){
var clone=liFirst.clone();
$(id).append(clone);
liFirst.remove();
})
}
setInterval("lunbo('ul','-50px')",3000)
</script>
</body>
</html>