HTML+CSS+jQuery实现弹幕技术
1、先建立一个Html网页，添加一个a标签（<a href="#" class="showBarrage">打开弹幕</a>）
2、再将弹幕的div层写好，代码如下：
<div class="barrage">
<div class="screen">
<a href="#" class="s_close">总驼X</a>
<div class="mask">
<!--内容在这里显示-->
</div>
</div>
<!--Send Begin-->
<div class="send">
<input type="text" class="s_text"/>
<input type="button" class="s_btn" value="说两句"/>
</div>
<!--Send End-->
<span class="s_close">X</span>
</div>
这段代码用到的css：
.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;display:none;}
.barrage .screen .mask{position:relative;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity:1);z-index:1;}
.barrage{display:none;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;}
.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;}
3、最后写实现弹幕效果的js代码：
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
$(".showBarrage,.s_close").click(function(){
$("哨泪忌.barrage,.s_close").toggle("slow");
});
init_animated();
})
//提交评论
$(".send .s_btn").click(function(){
var text = $(".s_text").val();
if(text == ""){
return;
};
var _lable = $("<div style='right:20px;top:0px;opacity:1;color:"+getRandomColor()+";'>"+text+"</div>");
$(".mask").append(_lable.show());
init_barrage();
})
//初始化弹幕技术
function init_barrage(){
var _top = 0;
$(".mask 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:getRandomColor()});
//定时弹出文字
var time = 10000;
if($(this).index() % 2 == 0){
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>
4、现在来看下效果
1、先解读css吧，几个关键的代码：
//相对布局和绝对布局
position:relative;
position:absolute;
//这个后面的值谁最大，谁就在最上面
z-index:2；
//显示方式，none:不显示，block:显示
display:none;
display:block;
//透明度
opacity:0.5;
//过滤不透明级别
filter:alpha(opacity:1)
//不允许文字换行，除非遇到<br>标签
white-space:nowrap;