HTML Marquee跑马灯 | 易学教程

Marquee是html的标签，所有的主流浏览器都能兼容，用于创建文字滚动。
来介绍下标签的属性

滚动方向 direction

<!--滚动方向 direction 4个值 up down left right  默认从右向左-->
<marquee direction="up">我想上滚动</marquee>

滚动方式 behavior

<!--3个值 scroll-循环滚动 slide-只滚动一次 alternate-来回滚动  默认循环滚动-->
<marquee behavior="slide">我只滚动一次</marquee>

滚动速度 scrollamount

<!--值越大，滚动速度越快 一般5-10比较适宜消息观看-->
<marquee scrollamount="5">我是速度为5的滚动</marquee>

滚动延迟 scrolldelay

<!--值越大，滚动速度越慢，通常不设置-->
<marquee scrolldelay="90">我延迟滚动</marquee>

滚动循环 loop

<!-- 默认值-1或infinite 表示无限循环滚动 loop="数值" 表示滚动相应的次数-->
<marquee loop="2">我是loop循环滚动</marquee>

滚动范围控制 width height

滚动背景颜色 bgcolor

//宽100px 高90px 背景色为#f5f5f5的滚动区域
<marquee direction="up" width="100" height="90" bgcolor="#f5f5f5" >
    <p>开发工程师</p>
    <p>设计师</p>
    <p>前端开发</p>
</marquee>

滚动空间 hspace-水平边距 vspace-垂直边距

<marquee direction="up" width="50" hspace="20" vspace="10" >
    <p>开发工程师</p>
    <p>设计师</p>
    <p>前端开发</p>
</marquee>

滚动事件

//鼠标悬停，滚动停止   鼠标离开，滚动继续
<marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()">
    <p>开发工程师</p>
    <p>设计师</p>
    <p>前端开发</p>
</marquee>

简单的一个标签，就能让文字随心所欲地走起来~

来源：CSDN

作者：相信凯撒

链接：https://blog.csdn.net/weixin_46050560/article/details/104779171

标签

marquee

跑马灯