性子急的朋友可以直接去看**和效果演示—>戳我
<—
介面製作就不囉嗦了，後面會放上**，先講一下關鍵技術。
實現思路：點選傳送彈幕，就會將輸入的值儲存進乙個陣列裡，並且將當前輸入的在彈幕顯示框顯示出來，同時後台也一直從該陣列中每隔一段時間隨機抽取一條記錄顯示出來。點選關閉彈幕會清空彈幕牆並且停止後台的讀取，同時將按鈕上的字變成啟動彈幕。而在彈幕牆關閉的時候點選傳送彈幕，也會啟動彈幕牆。
bug們：
1、彈幕牆裡每一條記錄的div必須設定為absolute。如果不設定，則不能使用定位，不方便彈幕的移動。如果設定為relative，一開始的話會相對於上一條彈幕來定位，影響使用效果。
2、彈幕進入彈幕牆最左邊後必須將這一條彈幕的div從彈幕牆的div中清楚，否則彈幕將積壓在彈幕牆左側不可見處，等到後面會發現彈幕都不動了，因為都擠在一塊了。
關鍵技術：
1、隨機顏色：這個目前發現的最好的方法是
var getrandomcolor = function
()
覺得我沒說清楚的請看，我就是參考這兒的：
2、後台持續讀取：沒有簡單的用死迴圈，用了乙個很巧妙的方法——遞迴。
var rundanmu = function
()
$(document).ready(function(){});裡呼叫該函式。
下面放完整**：
html
charset="utf-8">
danmutitle>
rel="stylesheet"
href="css/style.css">
head>
yinyoupoet danmu wallh1>
center>
class="danmushow">
div>
class="submit">
id="comments"
type="text"
name="comments"
placeholder="輸入文字">
id="submit">傳送彈幕button>
id="change">關閉彈幕button>
center>
div>
src=''>
script>
src="js/index.js">
script>
body>
html>
*
.body
.danmushow
.submit
#comments
#submit
#change
var arr = ; //用來儲存彈幕資料的陣列
var start = true; //用來判斷是否需要開啟彈幕
$(document).ready(function
() });
//關閉、開啟彈幕按鈕點選事件
$("#change").click(function
() else
if(start == false)
});var topmin = showscreen.offset().top;
var topmax = topmin+showheight;
"最小高"+topmin);
"最大高"+topmax);
var top = topmin;
//將傳入的引數,也就是那obj，進行移動
var moveobj = function
(obj));
var begin = showscreen.width() - obj.width(); //一開始的起點
top+=50;
if(top > topmax-50)
"showscreenwidth"+showscreen.width());
"objwidth",obj.width());
console.log("begin:"+begin);
console.log("top:"+top);
console.log("obj"+obj);
obj.css();
var time = 20000 + 10000*math.random();
obj.animate(,time,function
());
}//獲取隨機顏色的最高端寫法
var getrandomcolor = function
() var rundanmu = function
() }
settimeout(rundanmu,3000);
} jquery.fx.interval = 50;
rundanmu();
});
jQuery 之簡單彈幕製作
class box class top src static 夢然 少年 mp4 controls autoplay muted audio div class foot type text name id text type button value 傳送 id btn div div 首先，我們...
Jquery實現彈幕效果
前端顯示 吐槽 發射 樣式 html,body boxdom iddom content title text btn string js function crespan.css 擴充套件字幕顏色 var spandom boxdom span last child alert spandom.h...
jQuery 彈幕特效 操作元素寬高
1 彈幕效果案例 2 val val 方法返回或設定被選元素的值 一般用於input表單元素 txt val 取值 txt val hello 設定值3 with 與 height 獲取元素的寬度 box css width box width 設定元素寬度 box css width 300px ...