时间:2021-05-25
前言
现在很多的直播平台或者视频平台都会用到弹幕加强和观众的互动效果,那么如何用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内随机的高度,避免超出
当然JS的动画也离不开计时器。这边也是用setInterval()
var timer=setInterval(()=>{var left=oSpan.offsetLeftleft-=10oSpan.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%; } .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实现弹幕内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了js实现弹幕效果的具体代码,供大家参考,具体内容如下效果展示:源码展示:原生js实现弹幕效果*{padding:0;margin:0;}.a
本文实例讲述了JS/jQuery实现简单的开关灯效果。分享给大家供大家参考,具体如下:实现效果:html结构只有两个button标签开灯关灯方法一:用原生js来
本文实例讲述了原生JS实现仿淘宝网左侧商品分类菜单效果代码。分享给大家供大家参考。具体如下:这是一款原生JS实现的仿淘宝网左侧商品分类菜单效果代码,JavaSc
半透明遮罩层效果基本上都是使用插件实现的,下面为大家分享下使用原生js实现半透明遮罩效果,感兴趣的朋友可以参考下哈,希望对你熟悉原生js有所帮助现在注册关闭用户
本文教大家用原生js实现的最简单选项卡切换效果,鼠标滑过,对应的隐藏部分显示,并且样式发生改变。代码最简洁,js行为优化版,复制粘贴即可使用。javascrip