原生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 相关文章推荐
javascript阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
原生js页面滚动延迟加载图片
Dec 20 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
js插件实现图片滑动验证码
Sep 29 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 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 函数学习简单小结
2010/07/08 PHP
php以post形式发送xml的方法
2014/11/04 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
php实现微信支付之现金红包
2018/05/30 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
python 实现插入排序算法
2012/06/05 Python
Web服务器框架 Tornado简介
2014/07/16 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
python五子棋游戏的设计与实现
2019/06/18 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
解决Python3下map函数的显示问题
2019/12/04 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
关于python中remove的一些坑小结
2021/01/04 Python
CSS3 实现的加载动画
2020/12/07 HTML / CSS
运动会广播稿60字
2014/01/15 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
完美的中文自荐信
2014/05/24 职场文书
运动会跳远广播稿
2015/08/19 职场文书
2016年情人节广告语
2016/01/28 职场文书