1.首先上图看下效果
2.废话不多说，直接上代码
1>html代码
<div class="barrage">
<div class="screen">
<div class="content">
<!--内容在这里显示-->
</div>
</div>
<!--发送对话框-->
<div class="send">
<input type="text" class="s_text" placeholder="使用回车可以快速发送弹幕"/>
<input type="button" class="s_btn" value="发送" />
<!--关闭弹幕功能-->
<span class="barrage_close">关闭弹幕</span>
</div>
</div>
2>css部分
*
{
padding:
0;
margin:
0;
}
input{
outline:
none;
}
.barrage .screen {
width:
100%;
height:
100%;
position:
absolute;
top:
0px;
right:
0px;
background:
url(
../img/1.jpg);
background-size:
cover;
}
.barrage .screen .content {
position:
relative;
width:
100%;
height:
100%;
background:
#000;
opacity:
0.5;
/* filter: alpha(opacity=100); *//***针对ie8以上或者更早的浏览器****/
background-color:
transparent;
z-index:
1;
}
.barrage {
width:
100%;
height:
100%;
}
.barrage .screen .content div {
position:
absolute;
font-size:
20px;
font-weight:
bold;
white-space:
nowrap;
line-height:
40px;
z-index:
40;
}
.barrage .send {
z-index:
1;
width:
100%;
height:
55px;
line-height:
55px;
background:
#000;
position:
absolute;
bottom:
0px;
text-align:
center;
}
.barrage .send .s_text {
width:
600px;
height:
40px;
line-height:
40px;
font-size:
16px;
font-family:
"微软雅黑";
border-radius:
20px;;
}
.barrage .send .s_btn {
width:
105px;
height:
40px;
background:
#22B14C;
color:
#fff;
border-radius:
10px;
}
.barrage_close {
position:
absolute;
right:
210px;
bottom:
10px;
width:
80px;
height:
20px;
border-radius:
10px;
text-align:
center;
line-height:
20px;
color:
#22B14C;
background:
#fff;
z-index:
99;
}
.barrage_close1{
color:
#fff;
background:
#fff;
}
/* css动画 */
.content div{
animation:
Text
15s
infinite
normal;
}
@keyframes
Text{
0%{
left:
100%;
}
20%{
left:
75%;
}
80%{
left:
0%;
}
100%{
left:
-30%;
}
}
3.js部分
$
(
function
() {
// $(".s_close").click(function () {
// $(".barrage").toggle("slow");
// });
// $(".barrage_close").toggle(function(){
// })
// init_animated();
init_barrage();
})
//将弹幕内容放进数组贮存起来
//var
arr=[];
//var
h=
arr.
push()
// 监听发送，按enter发送
document.
onkeydown=
function(
event){
var
e =
event ||
window.
event;
if(
e &&
e.
keyCode==
13){
// console.log(11111);
$(
".send .s_btn").
click();
}
}
//提交评论
$(
".send .s_btn").
click(
function () {
var
text =
$(
".s_text").
val();
if (
text ==
"") {
alert(
'你的内容为空，请填写评论在再发送');
return
false;
};
var
_lable =
$(
"<div style='right:20px;top:0px;opacity:1;color:" +
getColor() +
";'class='content_text'>" +
text +
"</div>");
$(
".content").
append(
_lable.
show());
init_barrage();
$(
".s_text").
val(
'');
})
//初始化弹幕技术
function
init_barrage() {
var
_top =
0;
$(
".content div").
show().
each(
function () {
var
_left =
$(
window).
width() -
$(
this).
width();
//浏览器最大宽度，作为定位left的值
var
_height =
$(
window).
height();
//浏览器最大高度
_top +=
75;
if (
_top >= (
_height -
130)) {
_top =
0;
}
$(
this).
css({
left:
_left,
top:
_top,
color:
getColor() });
//定时弹出文字
// var time = 10000;
// if ($(this).index() % 2 == 0) {
// time = 15000;
// }
// $(this).animate({ left: "-" + _left + "px" }, time, function () {
// $(this).remove();
// });
});
}
//获取随机颜色
function
getColor() {
return
'#' + (
function (
h) {
return
new
Array(
7 -
h.
length).
join(
"0") +
h
})
((
Math.
random() *
0x1000000 <<
0).
toString(
16))
}
3.效果演示查看：
https://leader755.github.io/Barrrage/
4.源码获取地址：
https://github.com/Leader755/Barrrage