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

网络编程 2024/12/22 佚名

3 2 1

圆月山庄资源网 Design By www.vgjia.com

前言

现在很多的直播平台或者视频平台都会用到弹幕加强和观众的互动效果，那么如何用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="/UploadFiles/2021-04-02/bg.jpg">

以下是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="/UploadFiles/2021-04-02/bg.jpg">

总结

js请求弹幕信息,前台js实现弹幕,队列弹幕js

标签：

js请求弹幕信息,前台js实现弹幕,队列弹幕js

圆月山庄资源网 Design By www.vgjia.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

圆月山庄资源网 Design By www.vgjia.com

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

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月22日

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

js请求弹幕信息,前台js实现弹幕,队列弹幕js

JavaScript中常用的3种弹出提示框(alert、confirm、prompt)

vue解决跨域问题(推荐)

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接