HTML-2.4 滚动字幕marquee

Yvonne爱编码

已于 2025-05-14 11:50:03 修改

阅读量561

点赞数 25

分类专栏：前端文章标签： html 前端

于 2025-05-12 18:22:43 首次发布

本文链接：https://blog.csdn.net/HRDMN/article/details/147892171

版权

前端专栏收录该内容

10 篇文章

订阅专栏

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。

系列文章目录

HTML-1.1 文本字体样式-字体设置、分割线、段落标签、段内回车以及特殊符号

HTML-2.1 文本字体样式之加粗、斜体、回车、下划线、上标标签、下标标签以及字号变小和变大

HTML-2.2 列表--无序列表、有序列表、定义列表

HTML-2.3 超链接-外部链接，内部链接，书签链接

HTML-2.4 滚动字幕marquee

HRML-3.1 表格table

HTML-3.2 表格的跨行跨列（课表制作实例）

HTML中应用CSS样式的三种常见方法

HTML-3.3 表格布局（学校官网简易布局实例）

前言

小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！

一、简单分析

1、滚动字幕

<marquee bgcolor="pink" behavior="scroll" scrollamount="60" width=""
		 height="" direction="left"onmousedown="this.stop()" onmouseout="this.start()">
		<font size="5" color="green">春天花会开，鸟儿自在飞</font>
		 <ul type="square">
		 	<li>网络工程</li>
			<li type="circle">
				<a href="1-1.html">文本</a>
			</li>
			<li>应用统计</li>
			<li>应用数学</li>
		 </ul> 
</marquee>

代码分析：

bgcolor="pink"：背景颜色为粉色

behavior="scroll"：滚动方式scroll---环绕滚动（默认）、slide----滚动一次、alternate---来回滚动

scrollamount="60"：表示速度，值越大速度越快。如果没有它，默认为6，建议设为1～3比较好

width=""：宽度

height=""：高度

direction="left"：滚动的方向，默认为从右向左：←，因此如果是向左滚动的话不需要次参数。其他可选的值还有right，down，up。滚动方向分别为：right表示→，up表示↑，down表示↓。

οnmοusedοwn="this.stop()" οnmοuseοut="this.start()"：鼠标按下时停止，鼠标移出时开始。

鼠标事件参数，共分为五种情况，分别是：

onMouseDown：指的是鼠标按下时所触发的事件。

onMouseUp：指的是鼠标按下后松开时所触发的事件。

onMouseOver：指的是鼠标移动到某对象范围之内所触发的事件。

onMouseOut：指的是鼠标离开对象范围时所触发的事件。

onMouseMove：指的是移动鼠标时所触发的事件。

代码运行：

2、标签

 <marquee bgcolor="pink" behavior="scroll" scrollamount="60" width=""
		 height="" direction="left"onmousedown="this.stop()" onmouseout="this.start()">
		 <a href=""><img src="../img/1test.jpg" width="100px"></a>
		 <a href=""><img src="../img/1test.jpg" width="100px"></a>
		 <a href=""><img src="../img/1test.jpg" width="100px"></a>
</marquee>

代码运行

二、代码块

滚动字幕代码如下：

<html>
	<head>
		<meta charset="utf-8">
		<title>滚动字幕marquee</title>
	</head>
	<body>
		<marquee bgcolor="pink" behavior="scroll" scrollamount="60" width=""
		 height="" direction="left"onmousedown="this.stop()" onmouseout="this.start()">
		 <font size="5" color="green">春天花会开，鸟儿自在飞</font>
		 <ul type="square">
		 	<li>网络工程</li>
			<li type="circle">
				<a href="1-1.html">文本</a>
			</li>
			<li>应用统计</li>
			<li>应用数学</li>
		 </ul> 
		 <!-- <a href=""><img src="../img/1.png" width="100px"></a>
		 <a href=""><img src="../img/1.png" width="100px"></a>
		 <a href=""><img src="../img/1.png" width="100px"></a> -->
		</marquee>
	 <!-- <a href="../个人主题网站/index.html"><h3 align="center">返回首页</h3></a>-->
	</body>
</html>

代码运行：

滚动图片代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>滚动字幕marquee</title>
	</head>
	<body>
		<marquee bgcolor="pink" behavior="scroll" scrollamount="60" width=""
		 height="" direction="left"onmousedown="this.stop()" onmouseout="this.start()">
		<!-- <font size="5" color="green">春天花会开，鸟儿自在飞</font>
		 <ul type="square">
		 	<li>网络工程</li>
			<li type="circle">
				<a href="1-1.html">文本</a>
			</li>
			<li>应用统计</li>
			<li>应用数学</li>
		 </ul> -->
		 <a href=""><img src="../img/1test.jpg" width="100px"></a>
		 <a href=""><img src="../img/1test.jpg" width="100px"></a>
		 <a href=""><img src="../img/1test.jpg" width="100px"></a>
		</marquee>
	<!-- <a href="../个人主题网站/index.html"><h3 align="center">返回首页</h3></a> -->
	</body>
</html>