您的位置：首页 > 其它

B\S备忘录22——少年，不来一发弹幕吗

2015-07-18 17:26 309 查看

最近做项目做的火热，自己的学习反而有些落后了，但是没关系，毕竟现在学习的东西都是以后要一直使用的，在项目中多写写调调还是有用的。

话说一直都喜欢看B站的视频，最有意思的莫过于弹幕刷屏了，一直都很好奇，弹幕是怎么做的，然而B站的源代码中并没有给出提示，所以就只能求助百度了。然后就发现了一个用JQuery技术实现的弹幕网页。

首先在VS默认的MVC网站中加了点东西，把弹出弹幕要用的标签都写完。

<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>

之后写了一个样式表，算是给这个简单的弹幕屏幕加了些默认的样式。

.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>
$(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>

最后在我尝试的时候，没有实现弹幕的效果，仔细读了一下搜到的资料发现需要引用的jquery是1.11.1版本的。引用了之后就是下面的场面了。

做软件当然要做的开心做的愉快，天天抱怨自己任务多，做不出来，不如自己调剂一下嘛，有了兴趣就能做下去了。

现在看见个好网站都想看看他是怎么实现的，这是职业病吗- -

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航