原生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 相关文章推荐
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
Feb 18 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
JS增加行复制行删除行的实现代码
Nov 09 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
jQuery UI制作选项卡(tabs)
Dec 13 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
解决vue自定义指令导致的内存泄漏问题
Aug 04 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 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
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
php 读取shell管道传输过来的内容
2010/03/01 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
JavaScript 学习笔记(十五)
2010/01/28 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
Python转换HTML到Text纯文本的方法
2015/01/15 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
学生学习总结的自我评价
2013/10/22 职场文书
企业消防安全制度
2014/02/02 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
洗手间标语
2014/06/23 职场文书
安全环保演讲稿
2014/08/28 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
优秀班组事迹材料
2014/12/24 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
Ajax实现异步加载数据
2021/11/17 Javascript
vue实现拖拽交换位置
2022/04/07 Vue.js