跑马灯 javascript
时间: 2023-09-07 21:14:31 浏览: 39
以下是一个简单的跑马灯的Javascript代码示例:
```html
<div id="marquee">
<p>这是一条跑马灯内容</p>
</div>
```
```javascript
var marquee = document.getElementById('marquee');
var marqueeChild = marquee.getElementsByTagName('p')[0];
var marqueeWidth = marquee.offsetWidth;
var marqueeChildWidth = marqueeChild.offsetWidth;
var currentPos = 0;
function marqueeAnimation() {
currentPos -= 1;
marqueeChild.style.left = currentPos + 'px';
if (currentPos < -marqueeChildWidth) {
currentPos = marqueeWidth;
}
window.requestAnimationFrame(marqueeAnimation);
}
marqueeChild.style.position = 'absolute';
marqueeChild.style.width = '100%';
marquee.style.overflow = 'hidden';
marqueeAnimation();
```
这段代码会让跑马灯中的文本往左无限滚动。使用 `requestAnimationFrame` 方法来实现动画效果,每次调用 `marqueeAnimation` 函数时更新文本的位置。当文本滚出跑马灯的左侧时,将其位置重置到跑马灯的右侧,实现无限循环滚动的效果。