本文实例讲述了JS实现的视频弹幕效果。分享给大家供大家参考,具体如下:
& lt; !DOCTYPE html>
& lt; html lang=坝τ谩北?
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;charset=utf - 8”比;
& lt;元charset=皍tf - 8”比;
& lt; title>斗鱼弹幕& lt;/title>
& lt; style>
html,身体{字体大小:10 px;溢出:隐藏;保证金:0;填充:0;}
#箱{宽度:100%;高度:100%;}
# dm{宽度:100%;高度:90 vh;背景:# E8F1F5;}
# dm跨度{宽度:汽车;高度:3 rem;字体大小:2快速眼动;行高:2快速眼动;位置:绝对的,空白:nowrap;}}
# idDom{宽度:100%;高度:10 vh;背景:# 666;位置:绝对的,底部:0;显示:flex;对齐项目:中心;justify-content:中心;}
#内容{宽度:50 rem;高度:10 vh;显示:flex;对齐项目:中心;justify-content:中心;}
.title{字体大小:2.2 px控制;颜色:# fff;行高:# ccc;}
。text{宽度:30 rem;高度:2.5雷姆;边界:没有,这个特性:.5rem;字体大小:1.4雷姆;保证金:0 .5rem;填充:0 1 rem;}
.btn{宽度:6 rem;高度:3 rem;边界:没有;背景:红色,颜色:# fff;}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类="盒子" id=昂凶印北?
& lt; div id="糖尿病"祝辞& lt;/div>
& lt; div类=" idDom " id=癷dDom”比;
& lt; div id=澳谌荨痹?
& lt; p类="标题"在吐槽:& lt;/p>
& lt;输入类型==拔谋尽薄拔谋尽崩鄆d=拔谋尽闭嘉环?扒胧淙肽阆胨档幕啊?比;
& lt;按钮类型=鞍磁ァ崩?" btn " id=癰tn”在发射! & lt;/button>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;脚本langugae=癹avascript”比;
var定时器;
var btn=. getelementbyid (btn);
btn。onclick=function () {addBarrage ();}
文档。onkeydown=function (evt) {var事件=evt | | window.event;如果(事件)。键码==13){addBarrage ();}}
var颜色=[' # 2 c3e50 ', ' # FF0000 ', ' # 1 e87f0 ', ' # 7 ac84b ', ' # FF7F00 ', ' # 9 b39f4 ', ' # FF69B4 '];//弹幕颜色库
函数addBarrage () {
clearInterval(计时器);
var文本=. getelementbyid(“文本”)value;
. getelementbyid(文本).valuehttps://www.yisu.com/zixun/=?
var指数=方法(math . random () * colors.length);//随机弹幕颜色
var screenW=window.innerWidth;
var screenH=dm.offsetHeight;
var max=数学。地板(screenH/40);
var=10 + 40 *高度(方法(math . random () * (max + 1)) - 1);
var跨度=document.createElement(“跨度”);
span.style。左=screenW +“px”;
span.style。顶级=身高+“px”;
span.style。颜色=颜色(指数);
跨度。innerHTML=文本;
var dmDom=. getelementbyid (dm);
dmDom.appendChild(跨度);
计时器=setInterval(移动,10);
}
函数移动(){
var arr=[];
var oSpan=document.getElementsByTagName(“跨度”);
我(var=0; i< oSpan.length;我+ +){
arr.push (oSpan[我].offsetLeft);
加勒比海盗[我]-=2;
oSpan[我].style。左=arr[我]+“px”;
如果(arr[我]& lt; -oSpan[我].offsetWidth) {
var dmDom=. getelementbyid (dm);
dmDom.removeChild (dmDom.childNodes [0]);
}
}
}
& lt;/script>
& lt;/body>
& lt;/html>
之前
运行效果如下图所示:
感兴趣的朋友可以使用:http://tools.jb51.net/code/HtmlJsRun,测试代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript动画特效与技巧汇总》、《JavaScript页面元素操作技巧总结》,《JavaScript运动效果与技巧汇总》、《JavaScript图形绘制技巧总结》,《JavaScript切换特效与技巧总结》,《JavaScript错误与调试技巧总结》,《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
