弹幕介绍：
是在网络上观看视频时弹出的评论性字幕。类似小说中行间彰显的夹批，视频中屏间飘过的评点叫做弹幕，原意指用大量或少量火炮提供密集炮击。而弹幕，顾名思义是指子弹多而形成的幕布，大量吐槽评论从屏幕飘过时效果看上去像是飞行射击游戏里的弹幕。

效果演示：

核心代码：

<script type="text/javascript">
//得到鼠标点击操作
$(".btn").click(function() {
    //得到文本框中的内容
    var content = $(".input_text").html();
    //alert(content);
    //得到弹幕显示的文本框
    var hiai_label = $("<div class='animated bounce animated flip'>" + content + "</div>")
    //把用户输入的弹幕显示的文本框中
    $(".hiai_content").append(hiai_label);
    //调用动画函数
    hiai_play();
});

//动画函数
function hiai_play() {
    var wen_top = 0;
    $(".hiai_content").find("div").each(function() {
        //确定弹幕的文字的每个位置
        var wen_left = $(".hiai_dm").width() - $(this).width();
        //当前弹幕的高度
        var wen_height = $(".hiai_dm").height();
        wen_top = wen_top + 30;
        //判断弹幕不超过显示屏
        if (wen_top > wen_height - 50) {
            wen_top = 0;
        }
        $(this).css({
            left: wen_left,
            top: wen_top,
            color: rgbaColor()
        });

        //给文字加上动画
        $(this).animate({
            left: "-" + wen_left + "px"
        },
        8000,
        function() {
            $(this).remove();
        });
    });
}

//给文字添加随机颜色
function rgbaColor() {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ")";
}

源码下载：
百度网盘链接：https://pan.baidu.com/s/1Mnpe5X85PGRbvT4AS_UKAA
提取码：nzwy

更多资源：goodsking@163.com