原生JS实现弹幕的简单操作速成

JS实现弹幕的简单操作

现在很多的直播平台或者视频平台都会用到弹幕加强和观众的互动效果，那么如何用JS实现这样的效果呢，用一个初学者的方法记录下这个方法，欢迎大牛指导。

首先需要操作文档必须拿到Dom中的元素，当然有很多方法，这里还是用document.querySelector.
这边也是为了键盘和鼠标都可发送封装了一个函数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写三级联动 java_原生js三级联动的简单实现代码
本文实例为大家分享了js查询天气应用,供大家参考,具体内容如下实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市. 实现过程:先调用百度地图的API来获取用户所在的城市, ...
用Ｈ5和原生JS制作一款简单的视频播放器
属性与方法介绍 video标签:有src属性,里面填资源地址,如果加上controls属性[因为属性内容和属性一样,可以只写controls,如:<video src="./IMG_4 ...
原生JS实现下拉菜单操作
原生JavaScript实现下拉菜单的操作逻辑分析: (1)该布局实现分为两个部分,导航栏部分以及下拉菜单部分,因此我们需要使用标签的嵌套,一共使用两对ul和li标签,外面的ul构成导航栏的框架,在 ...
原生JS实现7中简单效果
1. 轮播图描述: 每隔固定事件会自动换图点击向左键或者向右键后转到相应的图片上点击下面原点会转到相应图片效果图: 代码: HTML <div id="box"> ...
前端学习（2876）：原生js模块化+弹幕的宽度和高度
基于原生js实现主流弹幕的所有功能
原生js实现弹幕效果原理二距离写实现原理一有很长一段时间了,因为好像没什么人看,所以我就不太想写原理二,为了不食言,我还是坚持做完这个系列吧下面介绍的就是目前主流直播弹幕网站的弹幕实现方式,包括 ...
原生js实现简单JSONP
JSONP是一种非常常见的实现跨域请求的方法.其基本思想是利用浏览器中可以跨域请求外链的JS文件,利用这一特性实现数据传输. 用原生JS实现JSONP非常简单,无非几点: 1)定义一个函数,用于处理接 ...
原生JS实现的DOM操作笔记（草稿整理）
原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasC ...
原生js实现歌词滚动以及卡拉OK效果
干货转自网易实践者社区,感谢作者[严跃杰] [歌词滚动效果] 滚动歌词比较常见的一种歌词显示方式,今天我们来讨论如何通过原生js来完成一个简单的滚动歌词实现. 一般来说,滚动歌词有如下几项需求: 1. ...

原生JS实现弹幕的简单操作速成

JS实现弹幕的简单操作

原生JS实现弹幕的简单操作速成相关推荐

最新文章

热门文章