原生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 相关文章推荐
脚本安需导入(装载)的三种模式的对比
Jun 24 Javascript
javascript 定义新对象方法
Feb 20 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 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
随机广告显示(PHP函数)
2006/10/09 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
Python实现批量下载图片的方法
2015/07/08 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
几个SQL的面试题
2014/03/08 面试题
本科生职业生涯规划书范文
2014/01/21 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
工程承包协议书
2014/04/22 职场文书
医学专业自荐信
2014/06/14 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
诚信承诺书
2015/01/19 职场文书
大学班长竞选稿
2015/11/20 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android