js跑马灯
时间: 2023-07-23 19:09:05 浏览: 50
JS跑马灯可以通过定时器和CSS样式实现。以下是一个简单的例子:
HTML代码:
```html
<div id="marquee-container">
<div id="marquee-content">这是一段跑马灯文字,可以自定义内容。</div>
</div>
```
CSS样式:
```css
#marquee-container {
width: 200px;
height: 20px;
overflow: hidden;
position: relative;
}
#marquee-content {
position: absolute;
white-space: nowrap;
animation: marquee 5s linear infinite;
}
@keyframes marquee {
0% {
left: 100%;
}
100% {
left: -100%;
}
}
```
JS代码:
```javascript
// 获取跑马灯内容和容器
var marqueeContent = document.getElementById('marquee-content');
var marqueeContainer = document.getElementById('marquee-container');
// 计算跑马灯内容的宽度
var contentWidth = marqueeContent.offsetWidth;
// 如果内容宽度大于容器宽度,则启动跑马灯效果
if (contentWidth > marqueeContainer.offsetWidth) {
// 设置跑马灯内容的宽度,使其能够水平滚动
marqueeContent.style.width = contentWidth + 'px';
}
```
通过以上代码,可以实现一个简单的JS跑马灯效果。需要注意的是,CSS样式中的动画时间和跑马灯容器的宽高需要根据实际情况进行调整。