最近项目又用的了无缝滚动，提到滚动就不能不想到marquee这个html元素，这是老版本专门为了实现上下左右滚动出的一个标签元素。不过这个标签已经被html5废弃，官方也没有给出新的替换元素标签，所以现在大多数前端为手写marquee功能。下面我们就来学一下这个废弃的marquee。

在线预览效果：https://course.51qux.com/effect/marquee

html实现marquee跑马灯（无缝滚动）效果-QUI-Notes
我们先看看marquee

用法：

<marquee behavior="alternate"></marquee>

属性：

  • behavior 设置元素内如何滚动。可选值有 scroll | slide |alternate
  • bgcolor  设置背景颜色
  • direction 设置滚动的方向。可选值有 left | right | up  | down
  • hspace 设置水平边距
  • vspace 设置垂直边距
  • loop 设置滚动次数
  • scrollamount 设置每次滚动时移动的长度
  • scrolldelay 设置每次滚动时的时间间隔

回调事件

  • onbounce  滚动到结尾时触发，只能behavior 属性设置为 alternate 生效
  • onfinish   完成loop循环时触发
  • onstart  开始滚动时触发

方法

  • start 开始滚动
  • stop 停止滚动

案例：
向左滚动

<style type="text/css">
.left {overflow: hidden;white-space:nowrap;}.left p{display: contents;float: left;}
</style>
<marquee class="left" width="200" height="40" behavior="alternate" direction="left">
<p>前端知识体系</p>
<p>Web前端开发大系概览</p>
<p>Web前端开发大系概览-中文版</p>
<p>Web Front-end Stack v2.2</p>
</marquee>

向上滚动

<marquee class="up" width="200" height="40" direction="up">
<p>前端知识体系</p>
<p>Web前端开发大系概览</p>
<p>Web前端开发大系概览-中文版</p>
<p>Web Front-end Stack v2.2</p>
</marquee>

html实现marquee跑马灯（无缝滚动）效果-QUI-Notes

同理，将marquee的方向direction可以改成右right和下down，都是可以的，部分需要调整一下css样式而已。那么这个功能现在的浏览器都还支持，为什么会被废弃？

兼容性：

html实现marquee跑马灯（无缝滚动）效果-QUI-Notes

原因很简单，就是marquee有个致命的bug，就是循环滚动的时候有空白间隔，无法控制！上下滚动的时候还不是太明显，左右循环时，很长时间内是白屏，没有内容！真的不能解决吗？好像现在也没有把这个bug修复！所以还是手写marquee或者直接用插件的好！