一個(gè)非常簡(jiǎn)單的彈幕墻双藕，僅實(shí)現(xiàn)了彈幕顯示怎囚，沒有數(shù)據(jù)存儲(chǔ)和后續(xù)播放谣旁。
實(shí)現(xiàn)原理是從輸入框獲得彈幕內(nèi)容床佳，經(jīng)過修飾包裝后以添加DOM的方式動(dòng)態(tài)顯示在彈幕區(qū)內(nèi)。
彈幕顯示的高度為顯示區(qū)內(nèi)的隨機(jī)數(shù)榄审，減去20是為了不會(huì)頂著頂部，如果考慮到不壓著底下字幕杆麸，還需要加上適當(dāng)?shù)南袼亍?/p>
var spanH = Math.floor((Math.random())*(danmuH-20));
彈幕的移動(dòng)動(dòng)畫效果
var spanstring = $("#content_display>span:last-child");
//獲取剛添加進(jìn)DOM里面的彈幕搁进，這個(gè)選擇器的意思為選擇#display元素下面的最后一個(gè)直接子元素span。
spanstring.stop().animate({"left":danmuW},10000,"linear",function(){
$(this).remove();
});
//動(dòng)畫昔头，注意到開始前先設(shè)置了一個(gè)停止方法然后才開始運(yùn)行動(dòng)畫饼问，并且運(yùn)行完后調(diào)用一個(gè)回調(diào)函數(shù)將此對(duì)象移除。里面的參數(shù){"left":danmuW}指的是動(dòng)畫末位置揭斧。
顏色設(shè)置實(shí)現(xiàn)為先自定義了7個(gè)顏色莱革，然后彈幕生成時(shí)隨機(jī)選擇一個(gè)添加進(jìn)樣式，為什么不直接用所有顏色呢讹开，主要是考慮到美觀問題盅视，隨機(jī)生成所有顏色的話，白色旦万，淺色等會(huì)難以識(shí)別闹击。
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]});
這個(gè)小項(xiàng)目是在freecodecamp上javascript的入門練習(xí)，雖然很簡(jiǎn)單成艘，但是一開始完全摸不著頭緒赏半，搜索了好幾種實(shí)現(xiàn)方法贺归，最終才寫出來，跟成熟的方案比刪減了很多功能断箫，比如定時(shí)循環(huán)播放拂酣，后臺(tái)數(shù)據(jù)存儲(chǔ)等，希望以后技術(shù)精進(jìn)后可以再寫一個(gè)更完善的出來仲义。
