php弹幕,PHP直播源码，实现简单弹幕效果

PHP

直播源码实现简单弹幕效果的相关代码

html>

大作业_弹幕

* {

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%;

}

      

我是弹幕

发送

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 = '' + 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 

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) + ')';

}

以上就是

PHP

直播源码实现简单弹幕效果的相关代码， 更多内容欢迎关注之后的文章