使用JQuery开发一个发送弹幕Demo

这是一个简单的发送弹幕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;
}

下面是效果图：

使用JQuery开发一个发送弹幕Demo

猜你喜欢