HTML+CSS+jQuery实现弹幕技术
jQuery
YuriFance
5人收藏 1105次学习

HTML+CSS+jQuery实现弹幕技术

原文地址:HTML+CSS+jQuery实现弹幕技术

今天来分享一下比较火的一个技术:弹幕

工具

  • jquery-1.11.1.min.js
  • 记事本 Or Dreamweaver Or 其他能够编写网页的软件

快速使用

先建立一个Html网页,添加一个a标签(<a href="#" class="showBarrage">打开弹幕</a>)

再将弹幕的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;}

最后写实现弹幕效果的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>

现在来看下效果

代码解读

先解读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;

 

加入1KE学习俱乐部

1KE学习俱乐部是只针对1KE学员开放的私人俱乐部
标签:
HTML jQuery CSS