HTML
栅格水平居中
<div class="row justify-content-center"></div>
输入文本框
<input type="text" class="form-control" placeholder="说点什么？" id="text"></input>
按钮(onclick定义点击调用js函数)
<button class="btn btn-block btn-primary" id="fire" onclick="appendText()">发射</button>
CSS
overflow-x可以隐藏水平滚动条
body{
padding-top:60px;
overflow-x:hidden;
}
默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 如果需要改变，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!应用jquery的动画效果的元素必须改变元素的 position 默认属性；
.message{
position:absolute;
}
JS
从文本框获取弹幕评论，并添加到数组中。数组方法unshift（）是把文本移入在数组头部。
扩展：
- shift() 移出第一个元素
- unshift() 移入第一个元素
- pop() 弹出最后一个元素
- push() 压入最后一个元素
var commentArray = new Array();
var appendText = function(){
if($("#text").val()){
var text1 = $("#text").val();
commentArray.unshift(text1);
$("#text").val('');
}
}
jQuery CSS 操作函数offset()返回第一个匹配元素相对于文档的偏移位置，具有top、left两个属性；
jQuery CSS 操作函数css()设置或返回匹配元素的样式属性;
$(selector).animate({params},speed,callback);
- params 参数:必需的，定义形成动画的 CSS 属性。
- speed 参数：可选的 ，规定效果的时长。它可以取以值："slow"、"fast" 或毫秒。
- callback 参数：可选的 ，是动画完成后所执行的函数名称。
//滚动评论
var topMin = $(".barrage").offset().top;
var topMax = topMin + $(".barrage").height();
var _top = topMin;
var moveObj = function(obj){
var _left = $(".barrage").width()-obj.width();
obj.css({left:_left,top:_top,color:"red"});
_top = (_top+50 > topMax )? topMin : _top + 50;
obj.animate({left:"-"+ _left +"px"},20000,function(){obj.remove();});
}
append()函数实质是在DOM元素的内部的末尾（即</div>前）添加元素；添加的弹幕需要移动，所以加上 position 默认属性被更改了的类；
setTimeout（function_name,delay_time_ms）设置延迟执行;
var arrayLength = 0;
var getRun = function(){
var index;
var comment;
if(commentArray.length > 0){
if(arrayLength != commentArray.length){
index = 0;
arrayLength = commentArray.length;
}else{
index = Math.floor(arrayLength*Math.random());
}
comment = $("<div class=\"message\">"+commentArray[index]+"</div>");
$(".barrage").append(comment);
moveObj(comment);
}
setTimeout(getRun,5000);
}
