【JS】jQuery实现弹幕效果

效果图

HTML

<div class="boxDom" id="boxDom">
        <div class="idDom" id="idDom">
            <div class="content">
                <p class="title">吐槽:</p>
                <input type="text" class="text" id="text" />
                <button type="button" class="btn" id="btn">发射</button>
            </div>
        </div>
    </div>

CSS

<style type="text/css">
        html,
        body {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            font-family: "微软雅黑";
            font-size: 62.5%;
        }

        .boxDom {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .idDom {
            width: 100%;
            height: 100px;
            background: #666;
            position: fixed;
            bottom: 0px;
        }

        .content {
            display: inline-block;
            width: 430px;
            height: 40px;
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            margin: auto;
        }

        .title {
            display: inline;
            font-size: 4em;
            vertical-align: bottom;
            color: #fff;
        }

        .text {
            border: none;
            width: 300px;
            height: 30px;
            border-radius: 5px;
            font-size: 2.4em;
        }

        .btn {
            width: 60px;
            height: 30px;
            background: #f90000;
            border: none;
            color: #fff;
            font-size: 2.4em;
        }

        span {
            width: 300px;
            height: 40px;
            position: absolute;
            overflow: hidden;
            color: #000;
            font-size: 4em;
            line-height: 1.5em;
            cursor: pointer;
            white-space: nowrap;
        }
    </style>

JS-一定要引入jQuery文件

可前往jQuery官网下载：jQuery官网

<script src="../js/jquery-2.2.4.js"></script>

<script>
    var colors = ["red", "green", "hotpink", "pink", "cyan", "yellowgreen", "purple", "deepskyblue"];
    //绑定点击事件
    $('#btn').click(function () {
        //随机颜色和高度
        let c = parseInt(Math.random() * colors.length);
        let h = parseInt(Math.random() * 400);
        //创建一个新节点
        $("<span></span>")
            .text($("#text").val())
            .css('color', colors[c])
            .css('top', h)
            .css('left', 1400)
            .animate({ left: -500 }, 10000, 'linear', function () {
                this.remove();
            }).appendTo('#boxDom');
        $("#text").val('');
    })
    //回车事件
    $("#text").keydown(function (e) {
        if (e.keyCode == 13) {
            $("#btn").click();
        }
    })
</script>