最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
原生JS如何实现弹幕效果 原生JS实现弹幕效果代码示例
时间:2020-11-10 编辑:袖梨 来源:一聚教程网
原生JS如何实现弹幕效果?本篇文章小编给大家分享一下原生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代码,可以练练
作业_弹幕
以下是JS的代码:
相关文章
- js实现音乐播放器代码展示 10-12
- js实现图片查看器代码展示 10-12
- JS中switch的四种写法介绍 10-12
- js实现新闻轮播效果教程 10-11
- JS实现简单的图片切换功能教程 10-11
- js实现下拉刷新和上拉加载解析 09-28