這是一個簡單的發送彈幕Demo，採用了JQuery的animate動畫效果，實現彈幕滑動。
還實現了選擇彈幕顏色以及彈幕發送的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模擬彈幕</title>
<link rel="stylesheet" type="text/css" href="css/bilibili.css">
</head>
<body>
<div id="ban" style="width: 650px; height: 250px; position: relative; z-index: 10; ">
<video src="https://github.com/Linlx0628/linlx-file/blob/master/test.mp4?raw=true" controls="controls" style="width: 650px; height: 250px; background-color:black; position:fixed;">
</video>
</div><br>
<span>彈幕內容：<input type="text" name="content" id="bilibili_content"></span><br>
<span>
<span>彈幕顏色：</span>
正常:<input type="radio" name="text_color" value="white" checked="checked">
紅色:<input type="radio" name="text_color" value="red">
黃色:<input type="radio" name="text_color" value="yellow">
藍色:<input type="radio" name="text_color" value="blue">
</span><br>
<span>
<span>彈幕位置：</span>
正上方:<input type="radio" name="text_loc" value="top">
<!-- 正下方:<input type="radio" name="text_loc" value="lower"> -->
正常:<input type="radio" name="text_loc" value="normal" checked="checked">
</span><br>
<button id="send">發送</button>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//啓動動畫
function bilibiliAnimation(id,divid){
//開始向左前行動畫
$(".bilibili_txt_1").animate({left:'0px'},8000,function(){
$("#"+id).remove();
})
//開始置頂動畫
$(".bilibili_txt_2").animate({opacity: "0"},5000,function(){
$("#"+id).remove();
$("#"+divid).remove();
});
}
//發送彈幕
function send(){
//創建一個彈幕模板
var _html = "";
//獲取發送的彈幕顏色
var textColor = $("input[name='text_color']:checked").val()
//獲取彈幕內容標籤
var bilibiliTxt = $("#bilibili_content");
//獲取彈幕數據
var content = bilibiliTxt.val();
//創建一個p標籤ID
var content_id = "bilibili"+Math.ceil(Math.random()*500);
//創建一個置頂div標籤ID
var div_id = "ban2_"+Math.ceil(Math.random()*500);
//隨機創建一個隨機數，使彈幕位置隨機生成的效果
var topVal = Math.ceil(Math.random()*100);
//獲取發送彈幕的位置
var textLoc = $("input[name='text_loc']:checked").val();
//如果選擇了置頂彈幕
if(textLoc == "top"){
//計算出上下彈幕的間隔
var a = $(".ban2").size() * 10;
//實例模板
_html +="<div id="+div_id+" class='ban2' style='position: relative; text-align:center; padding-bottom:6px;'>";
_html += "<p id='"+content_id+"' class='bilibili_txt_2' style='top:"+a+"px; margin-top:0px; width:100%; color:"+textColor+";'>"+content+"</p>";
_html += "</div>";
}
//如果選擇了底部模板
/*else if(textLoc == "lower"){
var a = $(".ban2").size() * 10;
_html +="<div id="+div_id+" class='ban2' style='position: fixed; text-align:center;'>";
_html += "<p id='"+content_id+"' class='bilibili_txt_2' style='bottom:"+a+"px; width:100%; color:"+textColor+";'>"+content+"</p>";
_html += "</div>";
}*/
//如果選擇了正常彈幕
else if(textLoc == "normal"){
//實例模板
_html = "<p id='"+content_id+"' class='bilibili_txt_1' style='top:"+topVal+"px; right:0px; margin-top:0px; color:"+textColor+";'>"+content+"</p>";
}
//清空彈幕輸入框內容
bilibiliTxt.val("");
//添加到彈幕板上
$("#ban").append(_html)
//調用啓動動畫效果
bilibiliAnimation(content_id,div_id);
}
//點擊發送按鈕
$("#send").click(function(){
//調用發送彈幕函數
send()
})
})
</script>
</body>
</html>css文件內容：
.bilibili_txt_1{
color: white;
position:absolute;
}
.bilibili_txt_2{
color: white;
position:absolute;
}下面是效果圖：
