迹忆客 专注技术分享

在 HTML 中，我们可以使用 <marquee> 标签来创建移动或滚动的文本动画。 它允许我们创建从左到右、从右到左、从下到上和从上到下四个方向的滚动文本，改变速度并设置方向属性的值来设置滚动的方向 文本。

本文将重点关注改变 HTML 中 <marquee> 标签的速度。

使用<marquee>标签的scrollamount属性控制文本的滚动速度

scrollamount 属性设置 <marquee> 标签文本的滚动速度。 它采用字符串格式的数字值。

该属性的值表明它将在特定时间间隔内滚动多少像素。 scrollamount 属性的默认值为 6px。

例如，我们创建了具有不同 scrollamount 值的不同 <marquee> 标签。 在输出中，用户可以观察具有不同滚动量的文本的速度。

随着 scrollamount 的值越多，文本会移动得越快。

代码示例：

<marquee behavior=scroll direction="left" scrollamount="2">scrollamount = 2</marquee>
<marquee behavior=scroll direction="left" scrollamount="6">scrollamount = 6</marquee>
<marquee behavior=scroll direction="right" scrollamount="10">scrollamount = 10</marquee>
<marquee behavior=scroll direction="right" scrollamount="15">scrollamount = 15</marquee>

输出:

在上面的输出中，根据 scrollamount 和 direction 属性值，用户可以看到不同的文本以不同的速度向不同的方向移动。

使用 <marquee> 标签的scrolldelay属性控制文本的滚动速度

我们可以使用 scrolldelay 属性来设置每次滚动之间的时间间隔。 它接受字符串格式的毫秒值。

scrolldelay 属性的默认值为 85，它不接受低于 60 的值。在这个例子中，我们创建了具有不同 scrolldelay 属性值的不同 <marquee> 标签。

代码示例：

<marquee behavior=scroll direction="left" scrolldelay="200">scrolldelay = 200ms</marquee>
<marquee behavior=scroll direction="right" scrolldelay="61">scrolldelay = 61ms</marquee>
<marquee behavior=scroll direction="left" scrolldelay="300">scrolldelay = 300ms</marquee>
<marquee behavior=scroll direction="right" scrolldelay="150">scrolldelay = 150ms</marquee>

随着 scrolldelay 属性值的增加，随着每次滚动之间的间隔增加，文本移动速度变慢。 scrolldelay 和 scrollamount 属性在 HTML5 中已弃用。 因此，某些现代浏览器可能不支持它。