基於jQuery發射彈幕的一個小案例

一.直接上代碼

1.style樣式:

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

2.body中的內容

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

3.JS代碼

    <script src="jquery-1.12.4.js"></script>
    <script>
        let colors = ['red', 'blue', 'pink', '#0f0', 'cyan', 'orange'];
        function sendDanmu() {
            //1. 獲取到輸入框裏的內容
            let content = $('#text').val();

            //2. 創建一個span，並把它添加到 div 上
            let span = $('<span>' + content + '</span>>');
            //2.1 設置span的樣式
            let y = Math.ceil(Math.random() * 300);
            let color = colors[Math.floor(Math.random() * colors.length)];
            span.css({
                position: 'absolute',
                top: y,
                right: 0,
                fontSize: '20px',
                color:color
            });
                //2.2動畫
            span.animate({
                right:screen.width +'px'
                // animate 的回調函數
            },5000,function () {
                span.remove()
            });

            //3. 把span添加到div上
            $('#boxDom').append(span);

            //4.清空文本輸入框的內容,不在等號右邊就是設置選中元素的內容
            $('#text').val('');


        }

        $(function () {
            $('#btn').click(function () {
                sendDanmu();
            });
            $('#text').keyup(function (event) {//和原生js的區別就是不需要on+事件名了
                if (event.key === 'Enter') {  // 事件的key
                    sendDanmu();
                }
            });
        });
    </script>
    ```