用一个 js 文件实现跑马灯效果
最近为公司的大数据的小伙伴，第一期想先做一个跑马灯效果，使用场景就是他们有些系统要下线，集群要迁移，系统更新需要通知给所有用户，效率太慢了，就想让前端帮忙做一个文字滚动效果。
需求简单粗暴，哪个系统需要迁移做通知，只需要引入 JS 文件即可，不需要做任何操作。
- 先做一个分析
- 因为只想引入一个 js 文件，不需要写任何的 HTML 或者 CSS
-
创建一个自执行函数
image.png -
用 JS 动态创建几个 div 标签
image.png -
把每个 div 需要用到的样式写到一个对象中
image.png
-
-
创建一个 style 标签，把动画 CSS 加入到 style 标签中(因为我这里用的是 animation @keyframes 写的动画)
image.png -
然后把 style 插入到 head 标签中
image.png -
循环给每个 div 加入 style 样式
image.png
image.png
- 给 div 分一下层级，把子 div 插入到父 div 中
- 把需要提示的文字添加到子 div 里面 (文字从后端来，获取后端接口)
- 在把父 div 插入到 body 上
- 目前的思路就是这样，我也实现了效果
- 然后我又做了些修改，封装了一个方法，可以在外部引用，传递一些 option
GitHub地址
