用js写的一个弹幕 效果图：
源码：
<Meta charset="utf-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<Meta name="Generator" content="EditPlus®">
<Meta name="Author" content="">
<Meta name="Keywords" content="">
<Meta name="Description" content="">
JQuery弹幕
</script>
<style type="text/css">
body {
overflow: hidden;
}
.content {
overflow: hidden;
}
.ctxt {
background: burlywood;
width: 100%;
overflow: hidden;
margin: 0 auto;
z-index: 9999;
}
.ctxt p {
left: 95%;
margin: 0;
padding: 0;
z-index: 99;
overflow: hidden;
}
#msg{
height: 24px;
width: 200px;
}
#barrage {
color: gainsboro;
border: 1px solid aqua;
font-size: 12px;
border-radius: 10px;
float: right;
}
#style {
margin-top: 10px;
}
#publish {
display: none;
}
video {
width: 100%;
overflow: hidden;
z-index: -99999;
}
#danmu {
position: absolute;
overflow: hidden;
font-size:20px;
}
</style> <div id="" class="ctxt">
<video id="vo<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>" autoplay="autoplay">
<source src="video/1429411761ed3dc100c73251.mp4" type="video/mp4">
</source>
</video>
</div>
<div id="style">
<button id="barrage"> <font style="color: white;">开始弹幕</font></button>
<div id="publish">
<form method="post" align="center">
<input type="text" id="msg" />
<button type="button" id="submitBut">发布</button>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$("#barrage").click(function() {
$("#publish").toggle();
});
$("#submitBut").click(function() {
var msgtxt = $("#msg").val();
var colortxt = getReandomColor();
var topPos = generateMixed(3);
if(topPos > 500) {
topPos = 30;
}
var newtxt = '<p id="danmu" style="top:' + topPos + 'px; color:' + colortxt + '">' + $("#msg").val() + '</p>';
$(".ctxt").prepend(newtxt);
var addTextW = $(".ctxt").find("p").width();
$(".ctxt p").animate({
left: '-' + addTextW + 20 + "px"
},30000,function() {
$(this).hide();
});
$("#msg").val(" ");
});
});
//<a href="https://www.jb51.cc/tag/suiji/" target="_blank" class="keywords">随机</a><a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>颜色值
function getReandomColor() {
return '#' + (function(h) {
return new Array(7 - h.length).join("0") + h
})((Math.random() * 0x1000000 << 0).toString(16))
}
//<a href="https://www.jb51.cc/tag/shengcheng/" target="_blank" class="keywords">生成</a><a href="https://www.jb51.cc/tag/suiji/" target="_blank" class="keywords">随机</a>数据。n表示位数
var jschars = ['0','1','2','3','4','5','6','7','8','9'];
function generateMixed(n) {
var res = "";
for(var i = 0; i < n; i++) {
var id = Math.ceil(Math.random() * 9);
res += jschars[id];
}
return res;
}
</script>