百度智能小程序_原生JS完成弹幕效果的简略操作

发布时间:2021-01-05 09:36 作者:jianzhan

摘要: 原生态JS完成视频弹幕实际效果的简易实际操作手册 本文关键给大伙儿详细介绍了有关原生态JS完成视频弹幕实际效果的简易实际操作手册,原文中根据实例编码详细介绍的十分详

原生JS实现弹幕效果的简单操作指南       这篇文章主要给大家介绍了关于原生JS实现弹幕效果的简单操作指南,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

现在很多的直播平台或者视频平台都会用到弹幕加强和观众的互动效果,那么如何用JS实现这样的效果呢,用一个初学者的方法记录下这个方法,欢迎大牛指导。

1、首先需要操作文档必须拿到Dom中的元素,当然有很多方法,这里还是用document.querySelector.

2、这边也是为了键盘和鼠标都可发送封装了一个函数function sendMsg(){

首先需要创建一个容器来接受你编辑的内容,这里用span标签,当然其他标签也可

var oSpan=document.cerateElement(“span”)

将oSpan插入到需要展示的oVideoBox

oVideoBox.appendChild(oSpan)

给oSpan加入class用于编辑插入的样式,当然也可以用js,这里用的CSS样式oSpan.classList.add(“danmu”)

用innerHTML接用户图像及弹幕内容这里用ES6的一个``

oSpan.innerHTML =` img src ="./source/lei.jpg" / ${oContent.value}

计算弹幕出现的初始位置,left位移初始位置即oVideoBox的宽度oVideoBox.offsetWidth.也是oSpan的初始定位oSpan.offsetLeft
top位移的初始即oVideoBox内随机的高度,避免超出

var maxTop=oVideoBox…clientHeight-oSpan.offsetHeight;
var top=Math.round(Math.random()*maxTop)
oSpan.style.top = top+ ‘px'

当然JS的动画也离不开计时器。这边也是用setInterval()

var timer=setInterval(()= {
var left=oSpan.offsetLeft
left-=10
oSpan.style.left= left+ ‘px'

这边判断一下如果超出屏幕就把弹幕和计时器移出

if(left -oSpan.offsetWidtb){
clearInterval(timer);
oSpan.remove();}},100)

以上就完成了简易版的弹幕函数就封装完成了,后面就可以引用了,

事件从点击开始,弹幕也是创建点击事件oSend.onclick,

oSend.οnclick=function(){引用函数sendMsg()}

后面可以加上一个键盘的enter可以发送,是一个事件委托window.οnkeydοwn=function(e){

var ev = e || event;
var keyCode = ev.keyCode || ev.which;

判断如果按的是键盘enter的keycode码是13和alt组合

if (keyCode === 13 ev.altKey) {
sendMsg();}}

以下是bod代码,可以练练

 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%;
 /* height: 500px; */
 .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: 60px;
 height: 60px;
 border-radius: 50%;
 vertical-align: middle;
 display: inline-block;
 /style 
 /head 
 body 
 div 
 div 
 img src="../../source/bg.jpg" / 
 !-- span 我是弹幕 /span -- 
 !-- span 我是弹幕 /span 
 span 我是弹幕 /span 
 span 我是弹幕 /span 
 span 我是弹幕 /span -- 
 /div 
 div 
 input id="content" type="text" 
 button id="send" 发送 /button 
 /div 
 /div 
 /body 

以下是JS的代码:

 script 

var oSend = document.querySelector('#send'); var oContent = document.querySelector('#content'); var oVideoBox = document.querySelector('.videoBox');
oSpan.className = 'danmu'; oSpan.innerHTML = ` img src="../../source/bg.jpg" ${content}`; oVideoBox.appendChild(oSpan); var maxTop = oVideoBox.clientHeight - oSpan.offsetHeight; oSpan.style.top = Math.round(Math.random() * maxTop) + 'px'; var timer = setInterval(() = { var left = oSpan.offsetLeft; left -= 10; oSpan.style.left = left + 'px'; if (left -oSpan.offsetWidth) { clearInterval(timer); oSpan.remove(); }, 100); oSend.onclick = function () { sendMsg(); window.onkeydown = function (e) { var ev = e || event; var keyCode = ev.keyCode || ev.which; if (keyCode === 13 ev.altKey) { sendMsg(); /script

总结

到此这篇关于原生JS实现弹幕效果的文章就介绍到这了,更多相关原生JS实现弹幕内容请搜索凡科以前的文章或继续浏览下面的

  • HTML5学习培训线路材料,

    模拟题目:HTML5学习培训学习培训路线原材料,HTML5前端开发开发设计招骋招聘面试的技术性性栈 各位小伙子子伴大家好,现阶段前端开发开发设计程序员程序撰写可是十分的吃香。根据

  • 一址多照是啥?有哪些益

    模拟题目:一址多照是什么?有什么好处? 一址多照:便是指以同一详尽详细地址作为两个及以上企业的经营地办理备案申请办理申请注册,造成一个详尽详细地址签发很多经营执照的

  • 如何将iMindMap文档导出来为

    模拟题目:怎样将iMindMap文本文档导出来来为相片 iMindMap逻辑性逻辑思维导图能够将文本文档导出来来为相片文档文件格式,将逻辑性逻辑思维导图变成一幅照片,可以插到到其他的文本

  • 让你送“金猪”啦!|被

    原题目:让你送“金猪”啦!|被觉得是“非酋”的我,居然在这里里获得了2020年的好运气气! 福分满满的 “猪”事大吉 礼新岁,贺新春!福分满满的,欣喜连连! 当日起至二月1

  • 裂变式、共享、散播:A

    原题目:裂变式、共享、散播:App营销推广社交媒体游戏玩法全分析 总流量为王的时期,社交媒体服务平台一直至今全是每家必争的关键总流量阵营,因此,大部分App都设计方案了相对