PHP直播源码实现简单弹幕效果的相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>大作业_弹幕</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.wrapBox {
width: 800px;
height: 550px;
border: 1px solid #000;
margin: 50px auto 0;
}
.videoBox {
height: 500px;
position: relative;
overflow: hidden;
}
.videoBox img {
width: 100%;
height: 100%;
}
video {
width: 100%;
}
.danmuSend {
display: flex;
height: 50px;
}
#content {
flex: 1;
}
#send {
width: 100px;
}
.danmu {
color: #f00;
font-size: 20px;
position: absolute;
left: 800px;
top: 0;
white-space: nowrap;
}
.danmu img {
width: 30px;
height: 30px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="wrapBox">
<div class="videoBox">
<img src="longmao.jpg" />
<span class="danmu">我是弹幕</span>
</div>
<div class="danmuSend">
<input id="content" type="text">
<button id="send">发送</button>
</div>
</div>
</body>
<script>
var oSend = document.querySelector('#send');
var oContent = document.querySelector('#content');
var oVideoBox = document.querySelector('.videoBox');
//点击发送按钮时触发此事件
oSend.onclick = function () {
//获取文本框输入的内容
var content = oContent.value;
createDanmu(content)
}
function createDanmu(content) { // 创建弹幕 => 移动 => 消失
//新建一个span类型的标签
var oSpan = document.createElement('span');
//将获取的输入的内容传入标签
oSpan.innerHTML = '<img src="longmao.jpg">' + content;
//添加其class属性,对头像图片进行样式修改
oSpan.classList.add('danmu');
//设置其字体颜色属性随机
oSpan.style.color = randomColor();
//在oVideoBox所代表的的标签内添加该元素
oVideoBox.appendChild(oSpan);
//使该新标签出现的位置随机
oSpan.style.top = Math.round(Math.random() * (oVideoBox.clientHeight - oSpan.offsetHeight)) + 'px';
//设置定时器,使其位置改变
var timer = setInterval(function () {
// 初始位置
var start = oSpan.offsetLeft;
// 偏移量
start -= 10;
//先判断,使其向左移动相对父元素的距离最终小于其右边时移除该元素,并清除该定时器
if (start < -oSpan.offsetWidth) {
clearInterval(timer);
oSpan.remove();
}
// 赋值新位置
oSpan.style.left = start + 'px';
}, 100);
}
//用来生成随机颜色
function randomColor() {
return 'rgb(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ')';
}
</script>
</html>
以上就是PHP直播源码实现简单弹幕效果的相关代码， 更多内容欢迎关注之后的文章
