给我一个在容器中的弹幕效果,要求有五条弹幕通道,定义一个方法,传入弹幕,字体颜色,速度,弹幕所在的容器
时间: 2024-02-28 15:57:08 浏览: 26
好的,这里是一个在容器中的弹幕效果,共有五条弹幕通道。您可以将以下代码复制到您的 HTML 文件中使用,并调用 `addDanmu()` 方法来添加弹幕。
```html
<div id="danmu-container" style="position: relative; height: 300px; overflow: hidden;"></div>
<script>
function addDanmu(text, color, speed, container) {
var danmu = document.createElement('div');
danmu.textContent = text;
danmu.style.position = 'absolute';
danmu.style.whiteSpace = 'nowrap';
danmu.style.color = color;
danmu.style.top = Math.floor(Math.random() * 5) * 20 + 'px';
danmu.style.right = '-' + danmu.offsetWidth + 'px';
danmu.style.transition = 'transform ' + speed + 's linear';
container.appendChild(danmu);
danmu.style.transform = 'translateX(-' + (container.offsetWidth + danmu.offsetWidth) + 'px)';
setTimeout(function() {
danmu.remove();
}, speed * 1000);
}
setInterval(function() {
var texts = ['这是第一条弹幕', '这是第二条弹幕', '这是第三条弹幕', '这是第四条弹幕', '这是第五条弹幕'];
var colors = ['#f00', '#0f0', '#00f', '#ff0', '#0ff'];
var speeds = [10, 12, 14, 16, 18];
var container = document.getElementById('danmu-container');
var text = texts[Math.floor(Math.random() * texts.length)];
var color = colors[Math.floor(Math.random() * colors.length)];
var speed = speeds[Math.floor(Math.random() * speeds.length)];
addDanmu(text, color, speed, container);
}, 1000);
</script>
```
在 `addDanmu()` 方法中,我们创建了一个新的 `div` 元素,使用传入的文本、颜色和速度设置其样式,并将其添加到容器中。我们还使用 `setInterval()` 方法来每秒钟添加一个新的弹幕,以模拟真实的弹幕效果。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)