原生JS如何实现Vant组件库中的notice-bar的跑马灯效果
时间: 2024-03-26 20:40:21 浏览: 13
要实现Vant组件库中的notice-bar的跑马灯效果,可以使用原生JS的定时器和CSS3动画来实现。具体步骤如下:
1. 首先,在HTML中创建notice-bar的DOM结构,例如:
```
<div class="notice-bar">
<div class="notice-bar-content">这里是跑马灯内容</div>
</div>
```
2. 在CSS中设置notice-bar的样式,例如:
```
.notice-bar {
overflow: hidden;
white-space: nowrap;
}
.notice-bar-content {
display: inline-block;
animation: notice-bar-scroll 10s linear infinite;
}
@keyframes notice-bar-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
```
其中,设置overflow为hidden,可以隐藏超出notice-bar宽度的部分;设置white-space为nowrap,可以保证内容不换行;设置notice-bar-content为display:inline-block,可以让内容水平排列;设置animation为notice-bar-scroll,可以启用CSS3动画;设置transform为translateX,可以让内容水平移动。
3. 在JS中使用定时器来动态修改notice-bar的内容,例如:
```
const noticeBar = document.querySelector('.notice-bar');
const noticeBarContent = document.querySelector('.notice-bar-content');
const contentArr = ['这里是跑马灯内容1', '这里是跑马灯内容2', '这里是跑马灯内容3'];
let index = 0;
setInterval(() => {
noticeBarContent.textContent = contentArr[index];
index = (index + 1) % contentArr.length;
}, 5000);
```
其中,使用setInterval来定时修改notice-bar的内容;使用textContent来设置内容(可以避免XSS攻击);使用index来轮流显示contentArr数组中的内容。
通过以上步骤,就可以实现Vant组件库中的notice-bar的跑马灯效果了。