html实现marquee跑马灯(无缝滚动)效果
七娃博客418 次
最近项目又用的了无缝滚动,提到滚动就不能不想到marquee这个html元素,这是老版本专门为了实现上下左右滚动出的一个标签元素。不过这个标签已经被html5废弃,官方也没有给出新的替换元素标签,所以现在大多数前端为手写marquee功能。下面我们就来学一下这个废弃的marquee。
在线预览效果:https://course.51qux.com/effect/marquee
我们先看看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 停止滚动
- 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>
同理,将marquee的方向direction可以改成右right和下down,都是可以的,部分需要调整一下css样式而已。那么这个功能现在的浏览器都还支持,为什么会被废弃?
兼容性:
原因很简单,就是marquee有个致命的bug,就是循环滚动的时候有空白间隔,无法控制!上下滚动的时候还不是太明显,左右循环时,很长时间内是白屏,没有内容!真的不能解决吗?好像现在也没有把这个bug修复!所以还是手写marquee或者直接用插件的好!
[…] 上篇我们html原生的marquee滚动的用法及缺点:就是滚动的时候空间留白过多,无法消除。所以我们,实际场景我们还是要用js打造出无缝滚动的marquee的插件。这篇文字总结了我最近开发的时候遇到的两种滚动效果:向左/向上。毕竟90%的时候都是这两种效果,向下和向右我几乎没有见到过。 […]