用css和js实现弹幕功能并注释
时间: 2023-05-26 14:06:59 浏览: 57
<!-- HTML部分 -->
<body>
<div class="container">
<div id="danmu"></div>
</div>
</body>
<!-- CSS部分 -->
<style>
.container {
width: 500px;
height: 300px;
position: relative;
}
#danmu {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
white-space: nowrap;
overflow: hidden;
width: 100%;
height: 100%;
text-shadow: 1px 1px 2px #000;
}
.danmu-item {
position: absolute;
color: #fff;
}
</style>
<!-- JS部分 -->
<script>
// 定义弹幕节点
class DanmuItem {
constructor(text, speed) {
// 创建节点并添加到父元素中
this.element = document.createElement('div');
this.element.classList.add('danmu-item');
this.element.innerText = text;
document.querySelector('#danmu').appendChild(this.element);
// 设置定位
const danmuWidth = this.element.clientWidth;
const danmuHeight = this.element.clientHeight;
const containerHeight = document.querySelector('.container').clientHeight;
this.element.style.left = '100%';
this.element.style.top = Math.random() * (containerHeight - danmuHeight) + 'px';
// 设置移动动画
this.element.animate([
{ left: '100%' },
{ left: '-' + danmuWidth + 'px' },
], {
duration: speed * 1000,
fill: 'both',
}).onfinish = () => {
// 移除节点
this.element.remove();
};
}
}
// 发送弹幕
function sendDanmu() {
const input = document.querySelector('#input');
const text = input.value;
if (text.trim() === '') {
return;
}
const danmu = new DanmuItem(text, 6);
input.value = '';
}
window.onload = () => {
// 监听回车事件,发送弹幕
document.addEventListener('keyup', (e) => {
if (e.code === 'Enter') {
sendDanmu();
}
});
}
</script>
<!--
1. HTML部分:结构只要一个用于容纳弹幕的div,id为danmu。
2. CSS部分:给容器设置宽、高、定位等样式,弹幕节点样式通过类名来定义。
容器里面的弹幕节点,利用CSS3的animation和transform来实现弹幕动画,并用text-shadow来增加弹幕字体轮廓。
3. JS部分:弹幕节点通过构造函数来实现,用animate设置弹幕移动动画,使用onfinish事件回调来移除节点。
发送弹幕通过监听回车键事件实现。
-->
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)