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

来源：互联网发布：三维软件介绍编辑：程序博客网时间：2024/05/17 00:01

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

话说一直都喜欢看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版本的。引用了之后就是下面的场面了。

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

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

0 0