- 博客(4)
- 收藏
- 关注
RSS订阅原创 vue实现多条通知公告循环播报
vue实现大屏下方通知公告本篇文章需要实现，上一条播报结束后，下一条通知再播报，而不是拼接为一串通知播报。首先我们需要一个定时器来控制当前消息的向左平移样式，然后我们需要一个偏移的变量offset，给offset一个初始值，初始值就是当前container容器的宽度，通过一个固定的速度speed，作为定时器的间隔时间，每个间隔时间，向左平移step的距离。然后判断当前偏移位置是否全部播报完成，如果播报完成，则重置我们的偏移变量offset。一、实现步骤。
2024-04-09 15:57:38
1094
原创 vue实现大屏下方通知公告
首先我们需要一个容器放置通知的内容id为notification-container，他的宽度为当前需要滚动的屏幕宽度，id为notification的盒子则负责放置通知的内容，当他大于屏幕宽度时，我们的x轴平移长度则应为屏幕的宽度，因为要保持初始化的时候，通知的内容是从屏幕的最右侧开始平移。所以我们的动效translateX的值不是100%，而是container的宽度。优化部分：可以将多条通知循环接替滚动而不是拼为同一条滚动消息进行滚动。并且我们的动画效果持续时间要根据字数的长度决定。
2024-04-08 15:45:58
431
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人