原生JS实现弹幕效果的简单操作指南


Posted in Javascript onNovember 10, 2020

前言

现在很多的直播平台或者视频平台都会用到弹幕加强和观众的互动效果,那么如何用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 class="wrapBox">
 <div class="videoBox">
  <img src="../../source/bg.jpg" />
  <!-- <span class="danmu">我是弹幕</span> -->
  <!-- <span class="danmu">我是弹幕</span>
  <span class="danmu">我是弹幕</span>
  <span class="danmu">我是弹幕</span>
  <span class="danmu">我是弹幕</span> -->
 </div>
 <div class="danmuSend">
  <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');




 function sendMsg() {
 var content = oContent.value;

 var oSpan = document.createElement('span');
 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实现弹幕内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
jQuery无缝轮播图代码
Dec 22 Javascript
js封装成插件的步骤方法
Sep 11 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
原生js实现针对Dom节点的CRUD操作示例
Aug 26 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
vue解决跨域问题(推荐)
Nov 10 #Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 #Javascript
如何在vue 中引入使用jquery
Nov 10 #jQuery
Vue + ts实现轮播插件的示例
Nov 10 #Javascript
vue router返回到指定的路由的场景分析
Nov 10 #Javascript
如何将Node.js中的回调转换为Promise
Nov 10 #Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 #Javascript
You might like
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
如何打开php的gd2库
2017/02/09 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
ParseInt函数参数设置介绍
2014/01/02 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
Python脚本实现集群检测和管理功能
2015/03/06 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
python 下载文件的几种方法汇总
2021/01/06 Python
电子商务专业毕业生求职信
2014/06/12 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
最美乡村教师观后感
2015/06/11 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
创业计划书之水果店
2019/07/18 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript
python开发飞机大战游戏
2021/07/15 Python