Marquee是html的标签，所有的主流浏览器都能兼容，用于创建文字滚动。虽然它已经过时，但不得不说，在快速实现文字滚动时，这个标签依旧简单粗暴。
滚动方向 direction
<!--滚动方向 direction 4个值 up down left right 默认从右向左-->
<marquee direction="up">我想上滚动</marquee>
1
2
2
滚动方式 behavior
<!--3个值 scroll-循环滚动 slide-只滚动一次 alternate-来回滚动 默认循环滚动-->
<marquee behavior="slide">我只滚动一次</marquee>
1
2
2
滚动速度 scrollamount
<!--值越大，滚动速度越快 一般5-10比较适宜消息观看-->
<marquee scrollamount="5">我是速度为5的滚动</marquee>
1
2
2
滚动延迟 scrolldelay
<!--值越大，滚动速度越慢，通常不设置-->
<marquee scrolldelay="90">我延迟滚动</marquee>
1
2
2
滚动循环 loop
<!-- 默认值-1或infinite 表示无限循环滚动 loop="数值" 表示滚动相应的次数-->
<marquee loop="2">我是loop循环滚动</marquee>
1
2
2
滚动范围控制 width height
滚动背景颜色 bgcolor
<!--宽100px 高90px 背景色为#f5f5f5的滚动区域-->
<marquee direction="up" width="100" height="90" bgcolor="#f5f5f5" >
<p>测试1</p>
<p>测试2</p>
<p>测试3</p>
</marquee>
1
2
3
4
5
6
2
3
4
5
6
滚动空间 hspace-水平边距 vspace-垂直边距
<marquee direction="up" width="50" hspace="20" vspace="10" >
<p>测试1</p>
<p>测试2</p>
<p>测试3</p>
</marquee>
1
2
3
4
5
2
3
4
5
滚动事件
<!--鼠标悬停，滚动停止 鼠标离开，滚动继续-->
<marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()">
<p>测试1</p>
<p>测试2</p>
<p>测试3</p>
</marquee>
1
2
3
4
5
6
2
3
4
5
6
vue中嵌入后，使用ajax后台获取数据，会有延迟，导致开始Marquee中数据为空，所以就会出现第一条数据滚动到头，突然跳回重新开始滚动，通过页面加载控制，当数据从后台获取到之后再显示Marquee，可以在Marquee上加v-if控制显示，示例：
<div class="announce-slide" v-if="announceList != '' && announceList != null && announceList != undefined">
<marquee id="affiche" align="left" behavior="scroll" bgcolor="" direction="left" height="100%" width="100%"
hspace="0" vspace="0" loop="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">
<p>
<span v-for="(item,index) in announceList" :key="index" @click="showDetail(item.id)" style="cursor: pointer;"><i>最新</i>{{item.title}}</span>
</p>
</marquee>
</div>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8