js用定时器实现动态文字滚动
时间: 2023-07-18 18:07:05 浏览: 52
可以使用 JavaScript 中的 setInterval() 方法来实现动态文字滚动效果。以下是一个简单的示例代码:
HTML 代码:
```html
<div id="scrolling-text">这是一段需要滚动的文字。</div>
```
JavaScript 代码:
```javascript
var scrollingText = document.getElementById("scrolling-text");
var textWidth = scrollingText.offsetWidth;
var containerWidth = scrollingText.parentNode.offsetWidth;
if (textWidth > containerWidth) {
var currentPosition = 0;
setInterval(function() {
currentPosition -= 1;
scrollingText.style.left = currentPosition + "px";
if (Math.abs(currentPosition) > textWidth) {
currentPosition = containerWidth;
}
}, 20);
}
```
在这个示例中,首先获取需要滚动的文字和其父元素的宽度,然后在文字宽度大于父元素宽度时启动定时器,每隔20毫秒向左移动1个像素,当文字移出容器时重新回到容器右侧,实现无限循环滚动的效果。
这只是一个简单的示例,你可以根据自己的需求调整滚动速度、方向等参数。