使用JQuery開發一個傳送彈幕Demo
阿新 • • 發佈:2018-12-05
這是一個簡單的傳送彈幕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;
}
下面是效果圖: