JS实现的视频弹幕效果示例

本文实例讲述了射流研究…实现的视频弹幕效果。分享给大家供大家参考，具体如下：

！DOCTYPE html html lang=' zh-CN ' head meta http-equiv=' Content-Type ' Content=' text/html；字符集=UTF-8 '元字符集='utf-8 '标题斗鱼弹幕/title style html，body { font-size :10 px飞越：隐藏；余量：0划水：0;} #框{宽度：100%；高度：100%;} # DM {宽度：100%；高度：90 VH背景： # E8F 1 F5} # DM span { width : auto height :3 rem font-size :2 rem；线高：2雷姆；位置：绝对；空白：无说唱；} # IDDom { width :100%；高度：10 VH背景技术： # 666;位置：绝对；底部：0;display : flex align-items : center；正义-内容：中心；} #内容{ width:50rem高度：10 VHdisplay : flex align-items : center；正义-内容：中心；} .title { font-size :2.2 px } rein；color: # fff线高： # CCC} .文本{ width:30rem高度：2.5雷姆；border : one border-半径：5 remfont-size :1.4 rem保证金：0.5雷姆；padding:0 1rem }。BTN { width :6 remheight :3 remborder : none背景：红色；color : # fff }/style/head dydiv class=' box ' id=' box ' div id=' DM '/div div class=' idDoM ' id=' idDoM ' div id=' content ' p class=' title '吐槽：/p输入类型='text' class='text' id='text '占位符='请输入你想说的话/button type=' button ' class=' BTN ' id=' BTN '发射！/button/div/div脚本lang gae=' JavaScript ' var timervar BTN=文档。getelementbyid(' BTN ')；BTN。onclick=function(){ AddBarak()；}文档。onkey down=function(evt){ var event=evt | | window。事件；if(事件。key code==13){add巴拉克()；}}var colors=['#2C3E50 '，' #FF0000 '，' #1E87F0 '，' #7AC84B '，' #FF7F00 '，' #9B39F4 '，' # ff69 B4 ']；//弹幕颜色库函数add巴拉克(){ ClearInterval(计时器);var text=文档。getelementbyid(' text ').价值；document.getElementById('text ').值=' ';var index=parsent(数学。随机()*颜色。长度)；//随机弹幕颜色var screenW=window . innerwidthvar screenH=DM . offthethightvar max=math。楼层(screenH/40)；var height=10 40 *(parsent(数学。random()*(max 1))-1)；var span=文档。创建元素(“span”)；跨度。风格。left=screenW ' pxspan.style.top=高度px '；跨度。风格。color=colors[index]；span.innerHTML=文本；var dmDom=文档。getelementbyid(' DM ')；dmdom。append child(span)；定时器=设置间隔(移动，10);}函数move(){ var arr=[]；var oSpan=文档。getelementsbytagname(' span ')；for(var I=0；IOs pan . lengthi){ arr . push(OspAN[I]).offsetLeft)；arr[I]-=2；oSpan[I]。风格。left=arr[I]“px”；if(arr[i]-oSpan[i]).offset width){ var DMDoM=document。getelementbyid(' DM ')；dmdom。移除子项(dmdom。子节点[0])；} } }/脚本/正文/html运行效果如下图所示：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试代码运行效果。

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript动画特效与技巧汇总》 、 《JavaScript页面元素操作技巧总结》 、 《JavaScript运动效果与技巧汇总》 、 《JavaScript图形绘制技巧总结》 、 《JavaScript切换特效与技巧总结》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。