一篇文章教你學(xué)會js實現(xiàn)彈幕效果

更新時間：2021年08月23日 10:31:13 作者：紙飛機

彈幕效果隨著b站的越做越強，出現(xiàn)了越來越多的仿照b站的視頻站點。然而這些視頻站仿照的最多的只有一點！那就是彈幕，現(xiàn)在也越來越多的人喜歡上了彈幕本文就教你如何制作

新建一個html文件：

哈哈哈，大家別像我一樣用中文命名。

中文命名是不合規(guī)范的，行走江湖，大佬們看見你的中文命名會笑話你的。

上圖中，我們引入了jquery插件，沒錯我們用jq寫，回歸原始（找不到cdn鏈接的小伙伴可以百度bootcdn，在里面搜索jquery）。并且取了個彈幕網(wǎng)的標(biāo)題。

搞出初始模版

在這里不得不提一句，我推薦前端開發(fā)的小伙伴們用vscode來開發(fā)，很好用的。

一個小技巧：在空白html文件輸入!會自動幫你初始化html模板

模板已經(jīng)建立完畢，并且引入jquery后，正文開始了：

HTML添加

<body>
    <div class="con">
        <div id="screen">
            <div class="dm_show">
                <!-- <div>text message</div> -->
            </div>
        </div>
        <div class="edit">
            <p class="msg">
                <input placeholder="說點什么吧？" class="content" type="text" />
            </p>
            <p class="btns">
                <input type="button" class="send" value="發(fā)送" />
                <input type="button" class="clear" value="清屏" />
            </p>
        </div>
    </div>
</body>

一段樸實無華的html。

再來寫好css：

CSS填充

<style>
    .con {
        background-color: floralwhite;
        padding: 40px 80px 80px;
    }
 
    #screen {
        background-color: #fff;
        width: 100%;
        height: 380px;
        border: 1px solid rgb(229, 229, 229);
        font-size: 14px;
    }
 
    .content {
        border: 1px solid rgb(204, 204, 204);
        border-radius: 3px;
        width: 320px;
        height: 35px;
        font-size: 14px;
        margin-top: 30px;
    }
 
    .send {
        border: 1px solid rgb(230, 80, 30);
        color: rgb(230, 80, 0);
        border-radius: 3px;
        text-align: center;
        padding: 0;
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        width: 159px;
        background-color: white;
    }
 
    .clear {
        border: 1px solid;
        color: darkgray;
        border-radius: 3px;
        text-align: center;
        padding: 0;
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        width: 159px;
        background-color: white;
    }
 
    .edit {
        margin: 20px;
        text-align: center;
    }
 
    .edit .btns{
        margin-top: 20px;
    }
 
    .edit .msg input{
        padding-left: 5px;
    }
 
    .text {
        position: absolute;
    }
 
    * {
        margin: 0;
        padding: 0;
    }
 
    .dm_show {
        margin: 30px;
    }
</style>

看看效果：

整體結(jié)構(gòu)已經(jīng)出來了，下面就是真二八經(jīng)的js：

js邏輯代碼

<script>
    $(function () {
        //設(shè)置“發(fā)送”按鈕點擊事件，將彈幕體顯示在彈幕墻上
        $('.send').click(function () {
            //獲取文本輸入框的內(nèi)容
            var val = $('.content').val();
            //將文本框的內(nèi)容賦值給val后，將文本框的內(nèi)容清除，以便用戶下一次輸入
            $('.content').val('');
            //將文本框內(nèi)容用div包裹起來，便于后續(xù)處理
            var $content = $('<div class="text">' + val + '</div>');
            //獲取彈幕墻對象
            $screen = $(document.getElementById("screen"));
            //設(shè)置彈幕體出現(xiàn)時的上邊距，為任意值
            var top = Math.random() * $screen.height() + 40;
            //設(shè)置彈幕體的上邊距和左邊距
            $content.css({
                top: top + "px",
                left: 80
            });
            //將彈幕體添加到彈幕墻中
            $('.dm_show').append($content);
            //彈幕體從左端移動到最右側(cè)，時間為8秒，然后直接刪除該元素
            $content.animate({
                left: $screen.width() + 80 - $content.width()
            }, 8000, function () {
                $(this).remove();
            });
        });
        //設(shè)置“清屏”點擊事件，清除彈幕墻中的所有內(nèi)容
        $('.clear').click(function () {
            $('.dm_show').empty();
        });
    });
</script>

意外嗎？就這么幾行，哈哈哈。

注釋里寫的很詳細(xì)，小伙伴們可以好好看來看，這里我給大家演示演示：