HTML之marquee实现文字滚动显示

最新推荐文章于 2023-10-16 23:01:22 发布

SELECT_BIN

最新推荐文章于 2023-10-16 23:01:22 发布

阅读量671

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/SELECT_BIN/article/details/103475341

版权

本文详细介绍了HTML的marquee标签，用于创建文字滚动显示效果。讲解了其基本语法、常用属性如align、behavior、bgcolor、direction、height、width等，并通过实例展示了如何控制滚动速度、方向、鼠标交互等。还提到了marquee在图片和超链接滚动方面的应用。

摘要由CSDN通过智能技术生成

滚动效果：

<div id="info" style="margin-top: 6px;">
    <i class="fa fa-volume-up" aria-hidden="true" style="position: relative;top: -5px;"></i>
    <marquee width="20%" id="scrollText" onmouseover="this.stop();" onmouseout="this.start();" scrollAmount="5" direction="top">
        <span id="noticeContent" onclick="showEvlDialogWindow()">您有知识评价回复待查看</span>
    </marquee>
</div>

scrollAmount="5" 数值越大滚动越快；

<i class="fa fa-volume-up" aria-hidden="true"></i>

图标，使用的话要引包；

资料：

语法：

<marquee></marquee>

以下是一个最简单的例子：

代码如下:

<marquee><font size=+3 color=red>Hello, World</font></marquee>

下面这两个事件经常用到：

onMouseOut="this.start()" ：用来设置鼠标移出该区域时继续滚动

onMouseOver="this.stop()"：用来设置鼠标移入该区域时停止滚动

代码如下:

<marquee onMouseOut="this.start()" onMouseOver="this.stop()">onMouseOut="this.start()" ：用来设置鼠标移出该区域时继续滚动 onMouseOver="this.stop()"：用来设置鼠标移入该区域时停止滚动</marquee>

这是一个完整的例子：

代码如下:

这是一个完整的例子

</marquee>

该标签支持的属性多达11个：

align

设定<marquee>标签内容的对齐方式

absbottom：绝对底部对齐（与g、p等字母的最下端对齐）

absmiddle：绝对中央对齐

baseline：底线对齐

bottom：底部对齐（默认）

left：左对齐