前端笔记 - 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（循环滚动）

    
    




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

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

循环滚动

二、滚动方式 behavior：alternate（来回滚动）

    
    




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

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

来回滚动

三、滚动方向 direction：up（从下到上）

    
    




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

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

从下到上

四、滚动方向 direction：left（从右到左）

    
    




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

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

从右到左

五、滚动速度（scrollamount）

    
    




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

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

滚动速度

六、循环次数（loop）

    
    




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

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

循环次数

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

    
    




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

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

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

八、给滚动字幕加超链接

    
    




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

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

给滚动字幕加超链接

九、综合其它属性

    
    




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

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

综合其它属性

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