使用JQuery開發一個發送彈幕Demo

時間 2019-11-10

標籤使用 jquery 開發一個發送 demo 欄目 JQuery 简体版

原文原文鏈接

這是一個簡單的發送彈幕Demo，採用了JQuery的animate動畫效果，實現彈幕滑動。
還實現了選擇彈幕顏色以及彈幕發送的位置。javascript

<!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文件內容：css

.bilibili_txt_1{
	color: white;
	position:absolute;
}

.bilibili_txt_2{
	color: white;
	position:absolute;
}

下面是效果圖：html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。