一个非常简单的弹幕墙,仅实现了弹幕显示,没有数据存储和后续播放。
实现原理是从输入框获得弹幕内容,经过修饰包装后以添加DOM的方式动态显示在弹幕区内。
弹幕显示的高度为显示区内的随机数,减去20是为了不会顶着顶部,如果考虑到不压着底下字幕,还需要加上适当的像素。
var spanH = Math.floor((Math.random())*(danmuH-20));
弹幕的移动动画效果
var spanstring = $("#content_display>span:last-child");
//获取刚添加进DOM里面的弹幕,这个选择器的意思为选择#display元素下面的最后一个直接子元素span。
spanstring.stop().animate({"left":danmuW},10000,"linear",function(){
$(this).remove();
});
//动画,注意到开始前先设置了一个停止方法然后才开始运行动画,并且运行完后调用一个回调函数将此对象移除。里面的参数{"left":danmuW}指的是动画末位置。
颜色设置实现为先自定义了7个颜色,然后弹幕生成时随机选择一个添加进样式,为什么不直接用所有颜色呢,主要是考虑到美观问题,随机生成所有颜色的话,白色,浅色等会难以识别。
var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"];
var colorra = Math.floor(Math.random()*7);
danmuspan.css({"top":spanH,"left":0,"font-size":20,"font-family":"Helvetica","color":colorArr[colorra]});
这个小项目是在freecodecamp上javascript的入门练习,虽然很简单,但是一开始完全摸不着头绪,搜索了好几种实现方法,最终才写出来,跟成熟的方案比删减了很多功能,比如定时循环播放,后台数据存储等,希望以后技术精进后可以再写一个更完善的出来。