这是一个简单的发送弹幕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;
}
下面是效果图: