html 流动文本,前端笔记 - HTML 特殊标签实现文字滚动

想用 HTML 做个文字滚动效果，可以用特殊标签 marquee 实现，当然也可以用 JS 实现， 今天试了下用特殊标签 marquee 实现文字滚动。先声明下本人从事于 iOS 开发，之前零零星星的学过 HTML ，但目前尚处于小白阶段😂，因此文章如果有不当之处还请各位大神不吝指出！

先一起看下 marquee 标签存在哪些属性：

behavior：滚动方式，三种：scroll(循环滚动) slide(单次滚动)、alternate(来回滚动)

bgcolor：滚动文本框的背景颜色

direction：滚动方向，四种：left(从右到左)、right(从左到右)、up(从下到上)、down(从上到下)

scrolldelay：每轮滚动之间的延迟时间，数字越大滚动越慢

scrollamount：一次滚动总的时间量，数字越小滚动越慢

align：文字的对齐方式，三种： middle(居中)、bottom(居下)、top(居上)

width：滚动文本框的宽度

height：滚动文本框的高度

loop：滚动次数，默认为 infinite(无限)

hspace：水平方向的空白距离

vspace：垂直方向的空白距离

下面便是 marquee 属性的一些应用

一、滚动方式 behavior ：scroll(循环滚动)

Document

behavior="scroll">

金风玉露一相逢, 便胜却人间无数.

两情若是久长时, 又岂在朝朝暮暮.

循环滚动

二、滚动方式 behavior：alternate(来回滚动)

Document

behavior="alternate">

金风玉露一相逢, 便胜却人间无数.

两情若是久长时, 又岂在朝朝暮暮.

来回滚动

三、滚动方向 direction：up(从下到上)

Document

behavior="scroll">

金风玉露一相逢, 便胜却人间无数.

两情若是久长时, 又岂在朝朝暮暮.

从下到上

四、滚动方向 direction：left(从右到左)

Document

behavior="scroll">

金风玉露一相逢, 便胜却人间无数.

两情若是久长时, 又岂在朝朝暮暮.

从右到左

五、滚动速度(scrollamount)

Document

behavior="scroll"

scrollamount="80px">

金风玉露一相逢, 便胜却人间无数.

两情若是久长时, 又岂在朝朝暮暮.

滚动速度

六、循环次数(loop)

Document

behavior="scroll"

scrollamount="80px"

loop="5">

金风玉露一相逢, 便胜却人间无数.

两情若是久长时, 又岂在朝朝暮暮.

循环次数

七、当鼠标停留在文字上，文字停止滚动

Document

behavior="scroll"

scrollamount="80px"

οnmοuseοver=stop()

οnmοuseοut=start()>

金风玉露一相逢, 便胜却人间无数.

两情若是久长时, 又岂在朝朝暮暮.

当鼠标停留在文字上，文字停止滚动

八、给滚动字幕加超链接

Document

behavior="scroll"

scrollamount="80px"

οnmοuseοver=stop()

οnmοuseοut=start()>

金风玉露一相逢, 便胜却人间无数.

两情若是久长时, 又岂在朝朝暮暮.

给滚动字幕加超链接

九、综合其它属性

Document

behavior="scroll"

scrollamount="30"

scrolldelay="0"

loop="-1"

width="500"

height="100"

bgcolor="#FFCCFF"

hspace="30"

vspace="10"

οnmοuseοver=this.stop()

οnmοuseοut=start()>

金风玉露一相逢, 便胜却人间无数.

两情若是久长时, 又岂在朝朝暮暮.

综合其它属性

小结：试了 HTML 实现文字滚动效果之后，发现比 iOS 简单方便许多，以后在工作之余会多学学前端知识，求大神带哈😀！