针对 HTML
中如何设置文字滚动的详细说明 ⑅︎◡̈︎*
前两天在维护某开源社区的内容时,突发奇想要美化一下网页的文字显示效果,虽然最后通过别的方式实现了我的需求,但是在上网冲浪的时候有了意外的收获:文字滚动,特此更博,以资鼓励。
正常的文字插入代码如下:
<p>我为什么一动不动????</p>
- 效果如下:
我为什么一动不动????
你也可以对其进行美化:
<p style="background:rgba(51, 102, 153, 0.6); color:rgba(255, 255, 255, 0.99); padding:0.1rem; padding-left:15px; padding-top: 10px; padding-bottom: 10px; border-radius:10px;">尽管如此我还是一动不动......</p>
- 效果如下:
尽管如此我还是一动不动......
MARQUEE
HTML 的 MARQUEE 元素 ( <marquee> </marquee>
) 用来插入一段滚动的文字。你可以使用它的属性控制当文本到达容器边缘发生的事情。
⚠️ 关于该标签对的使用,Mozilla 的开发文档上有一段标红警告:
⚠️ This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
⚠️ 意即该元素已经过时,为了网站维护和长久发展请勿继续进行使用,因此本文内容仅供参考
<MARQUEE scrollAmount=5 behavior=alternate>我可以来回滚动哈哈哈哈哈哈!!!</MARQUEE>
- 效果如下:
<MARQUEE style="WIDTH: 250px; HEIGHT: 100px" scrollAmount=5 direction=left>向左移动的文字</MARQUEE>
<MARQUEE style="WIDTH: 250px; HEIGHT: 100px" scrollAmount=5 direction=up>向上移动的文字</MARQUEE>
<MARQUEE style="WIDTH: 250px; HEIGHT: 100px" scrollAmount=5 direction=down>向下移动的文字</MARQUEE>
<MARQUEE style="WIDTH: 250px; HEIGHT: 100px" scrollAmount=5 direction=right>向右移动的文字</MARQUEE>
- 效果如下:
<MARQUEE behavior=alternate><MARQUEE scrollAmount=5 width=150>我躲起来,你抓不到我抓不到我!!!</MARQUEE></MARQUEE>
- 效果如下:
<MARQUEE behavior=alternate style="background:rgba(51, 102, 153, 0.6); color:rgba(255, 255, 255, 0.99); padding:0.1rem; padding-left:15px; padding-top: 10px; padding-bottom: 10px; border-radius:10px;"><MARQUEE scrollAmount=5 width=150>我躲!</MARQUEE><MARQUEE scrollAmount=7 width=150>你抓不到!</MARQUEE><MARQUEE scrollAmount=9 width=150>哈哈哈哈</MARQUEE></MARQUEE>
<P align=center>
<MARQUEE width=200 height=50>
<FONT face=隶变-简 color=#f77e76 size=5>
我往左边滚动
</FONT>
</MARQUEE>
<MARQUEE direction=right width=200 height=50>
<FONT face=微软雅黑 color=#f77e76 size=5>
我往右边滚动
</FONT>
</MARQUEE>
</P>
- 效果如下:
<CENTER>
<MARQUEE style="WIDTH: 300px; HEIGHT: 60px" scrollAmount=3 direction=down height=60>
<FONT face=隶变-简 color=#78a9cc size=5>
我往下滚动
</FONT>
</MARQUEE>
</CENTER>
<CENTER>
<MARQUEE style="WIDTH: 300px; HEIGHT: 60px" scrollAmount=3 direction=up height=60>
<FONT face=隶变-简 color=#78a9cc size=5>
我往上滚动
</FONT>
</MARQUEE>
</CENTER>
- 效果如下:
参数介绍:
变量 | 说明 |
---|---|
scrollAmount | 表示速度,值越大速度越快。如果没有这个值,默认为 6 ,建议设为 1~3 |
width 和 height | 表示滚动区域的大小,width 是宽度,height 是高度。特别是在做垂直滚动的时候,一定要设 height 的值。这样文字才能在一定的范围滚动 |
direction | 表示滚动的方向。默认为从右向左:←←← 。可选的值有 right ; down ; up。滚动方向分别为:right 表示 →→→ ,up 表示 ↑ ,down 表示 ↓ |
scrollDelay | 控制速度,默认为 90 ,值越大,速度越慢。通常不需要设置 |
behavior | 控制属性,默认为循环滚动,可选的值有 alternate ( 交替滚动 ) ; slide ( 幻灯片效果,指的是滚动一次,然后停止滚动 ) ,默认值为 scroll |
hspace | 设置水平边距 |
loop | 设置 marquee 滚动的次数。如果未指定值,默认值为 −1 ,表示 marquee 将连续滚动 |
参考链接: