- 博客(4)
- 收藏
- 关注
原创 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关注的人