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

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

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

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

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