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

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

html实现marquee跑马灯(无缝滚动)效果-Qui-Note
我们先看看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-Note

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

兼容性:

html实现marquee跑马灯(无缝滚动)效果-Qui-Note

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