Vue 实现跑马灯效果

前言

最近做活动需要做跑马灯效果，其他同事也有实现，本来打算复制他们代码，发现都是使用setInterval实现了，也没有封装为组件，所以自己用CSS3实现了一下跑马灯效果,并封装为组件,这样以后在需要写的时候,只需要引入组件就可以了。

实现的效果如下

实现思路

• HTML 结构父盒子固定,子盒子移动,并包含需要效果的内容
• 跑马灯效果 CSS3 实现肯定需要 infinite (循环执行动画)
• 运动前需要计算父盒子的宽度(wrapWidth),还有子盒子的总宽度(offsetWidth)
• 需要给定速度通过宽度计算出CSS3动画需要的时间duration

组件设计

向外暴露三个参数

• content: 因为滚动的数据大部分都是后台获取的,监听 content,当 content 有值的时候开始滚动(content 可以是任何类型数据)
• delay: 多久时开始执行动画只有第一次滚动时候生效(默认是 0.3s)
• speed: 速度(默认 100)

源码实现如下

源码中大部分都添加了注释,如有问题请指出谢谢

    复制代码

把源码发布到 npm 上

请参考我的另外一篇文章,

使用方法

npm install heyushuo-marquee --saveimport PaoMaDeng from 'heyushuo-marquee';
          
     {
    {item}}
    复制代码