前端ABC<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>qdabc.cn</title>
<style>
.barrage .screen{width:100%;height:100%;position:absolute;top:0px;right:0px;}
.barrage .screen .s_close{z-index:2;top:20px;right:20px;position:absolute;text-decoration:none;width:40px;height:40px;border-radius:20px;text-align:center;color:#fff;background:#000;line-height:40px;}
.barrage .screen .mask{position:relative;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity:1);z-index:1;}
.barrage{width:100%;height:100%;}
.barrage .screen .mask 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;background:#000;position:absolute;bottom:0px;text-align:center;left: 0;}
.barrage .send .s_text{width:600px;height:40px;line-height:10px;font-size:20px;font-family:"微软雅黑";}
.barrage .send .s_btn{width:105px;height:40px;background:#22B14C;color:#fff;border-radius: 5px}
.showBarrage{
text-decoration: none; cursor: pointer; font-family: "微软雅黑"; color: #DDD8CE; display: none; }
.hideBarrage{
text-decoration: none; cursor: pointer; font-family: "微软雅黑"; color: #DDD8CE; }
.mask{
overflow: hidden;
}
</style>
</head>
<body>
<div class="barrage">
<div class="screen">
<div class="mask">
<!--内容在这里显示-->
<img src="" />
</div>
</div>
<!--Send Begin-->
<div class="send">
<a href="#" class="showBarrage">打开弹幕</a>
<a href="#" class="hideBarrage">关闭弹幕</a>
<input type="text" class="s_text"/>
<input type="button" class="s_btn" value="发送"/>
</div>
</div>
</body>
</html>
<script language="javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
$(".showBarrage").click(function(){
$('.showBarrage').hide().siblings('.hideBarrage').show();
$('.mask').children('div').show();
});
$('.hideBarrage').click(function(){
$('.hideBarrage').hide().siblings('.showBarrage').show();
$('.mask').children('div').hide();
})
})
//提交评论
var tier=1;
$(".send .s_btn").click(function(){
tier+=1;
send_barrage(tier)
$('.s_text').val("");
})
//enter键提交
$(document).keyup(function(event){
tier+=1;
if(event.keyCode==13){
send_barrage( tier);
$('.s_text').val("");
}
})
//根据后台数据 创建弹幕
function send_barrage(tier){
var text = $(".s_text").val();
if(text == ""){
alert("请输入弹幕");
return;
}else if(text.length>20){
alert("输入的字达到上限")
$('.s_text').val("");
return;
}
var _lable = $("<div style='display:inline;right:20px;top:0px;opacity:1;color:"+getRandomColor()+";z-index:"+tier+"'>"+text+"</div>");
$(".mask").append(_lable.show());
init_barrage();
}
//初始化弹幕技术
function init_barrage(){
var _top = 0;
var vules="";
$(".mask div").show().each(function(){
var lastDom=$('.mask>div:last-child')
var _left = $(window).width()-$(this).width();//浏览器最大宽度，作为定位left的值
var _height = $(window).height();//浏览器最大高度
_top +=75;
if(_top >= (_height -130)){
_top = 0;
}
if(_left<$(window).width()){
_left=$(window).width();
}
lastDom.css({left:_left,top:_top,color:getRandomColor()});
//定时 弹出文字
var time = 10000;
if($(this).index() % 2 == 0){
// console.log($(this).index())
time = 15000;
}
$(this).animate({left:"-"+_left+"px"},time,function(){
$(this).remove();
});
}
);
}
//获取随机颜色
function getRandomColor(){
return '#' + (function(h){
return new Array(7 - h.length).join("0") + h
})((Math.random() * 0x1000000 << 0).toString(16))
}
</script>
欢迎分享本文，转载请保留出处：前端ABC » JQ弹幕效果-视频出现的那种