摘要：根據指定內容生成彈幕，并初始化其位置以及其樣式，插入中。最終完整版代碼彈幕定時器控制彈幕顯隱變量監聽發送按鈕創建彈幕添加定時任務監聽關閉彈幕按鈕新建一個彈幕為彈幕添加定時任務最終效果圖快給自己刷波吧

就在最近這幾年，彈幕這個東西慢慢地流行了起來。我們在網上看視頻或者看直播都能見到彈幕的身影，有時候彈幕的內容甚至比視頻本身內容還要精彩。本人也是很喜歡彈幕這個東西，看到精彩處刷個彈幕都是常事。正好最近也比較空閑,于是就自己寫了一個Demo來展示一下彈幕效果的實現原理。不足之處，歡迎留言指教。

項目結構非常簡單，非常標準的html+css+js的結構。這里我們用了第三方的jQuery庫來幫助我們完成這個彈幕效果。如果有興趣的話，可以嘗試一下用原生js去實現這個功能，看完這篇文章相信你也可以輕輕松松地用原生js實現。

    
    
    
    
    


    

    

        
        發射
        關閉彈幕
    

這里我們頁面的布局非常簡單，主要分為上下兩個div：

div.screen_container作為我們的彈幕墻，這里將會放我們發射的彈幕內容。

div.screen_toolbar包含一個輸入框用于輸入我們需要發射的彈幕內容、一個發射按鈕和一個關閉彈幕按鈕。

另外就是引入第三方庫以及我們自己的css和js。

.screen_container{
    position: relative;
    width: 600px;
    height: 400px;
    margin: 30px auto;
    background: #000;
    overflow: hidden;
}
.screen_toolbar{
    width: 600px;
    margin: 20px auto;
    text-align: center;
}

CSS的來稍微美化一下我們的布局，這里不設置我們的彈幕的樣式。

彈幕的實現原理非常簡單，我們點擊”發射“按鈕，就根據輸入的彈幕的內容生成一個div插入div.screen_container中，并隨機初始化我們生成的div的位置。這樣我們的彈幕墻中就有一個我們自己生成的彈幕了，但是此時的彈幕還沒有移動效果，需要給它加個定時任務，遞減彈幕的CSS屬性left的值，就可以實現移動效果。最后當彈幕移出彈幕墻的時候，銷毀一下彈幕。整個彈幕效果實現過程大致就是這樣，是不是很簡單！

function createScreenbullet(text) {
    var jqueryDom = $("
" + text + "
");
    var fontColor = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random()) + ")";
    var fontSize = Math.floor((Math.random() + 1) * 24) + "px";
    var left = $(".screen_container").width() + "px";
    var top = Math.floor(Math.random() * 400) + "px";
    top = parseInt(top) > 352 ? "352px" : top;
    jqueryDom.css({
        "position": "absolute",
        "color": fontColor,
        "font-size": fontSize,
        "left": left,
        "top": top
    });
    $(".screen_container").append(jqueryDom);
    return jqueryDom;
}

這里我們需要注意以下幾點：

這里我們是根據定位父級div.screen_container進行定位，這里我們的彈幕值left值都是div.screen_container寬度（即：每個彈幕都從彈幕墻的最右邊向左移動）。

關于彈幕的top值的設定，由于我們字體大小設置在24px~48px之間，保險起見，我們最高top值為352px（即div.screen_container的高度減去48）。

不要忘記給每個彈幕設置position屬性，值為”absolute“

function addInterval(jqueryDom) {
    var left = jqueryDom.offset().left - $(".screen_container").offset().left;
    var timer = setInterval(function () {
        left--;
        jqueryDom.css("left", left + "px");
        if (jqueryDom.offset().left + jqueryDom.width() < $(".screen_container").offset().left) {
            jqueryDom.remove();
            clearInterval(timer);
        }
    }, 10);
    timers.push(timer);
}

這里我們需要注意以下幾點：

獲取指定彈幕的css屬性left值，除了上面的方法，還可以通過parseInt(jqueryDom.css("left"))或者parseFloat(jqueryDom.css("left"))獲取

消除彈幕的臨界點判斷。判斷彈幕是否出界，就是看彈幕的最右側是否出界來判斷。這里我們有兩種判斷方法。第一種，以游覽器最左側作為基準，彈幕距離游覽器最左側的值加上彈幕自身的寬度小于彈幕墻距離游覽器最左側的距離即為出界；第二種：parseFloat(jqueryDom.css("right"))>600判斷彈幕的css屬性right值是否大于600（即彈幕墻的寬度）。
3.timers是我們設置的一個全局定時任務隊列。

$(".send").on("click", function () {
    // 創建彈幕
    var jqueryDom = createScreenbullet($("#screenBulletText").val());
    // 添加定時任務
    addInterval(jqueryDom);
});

如果我們想體驗更好一點，可以加個Enter按鈕監聽。

$("#screenBulletText").on("keydown", function (event) {
    if (event.keyCode == 13) {
        // 創建彈幕
        var jqueryDom = createScreenbullet($("#screenBulletText").val());
        // 添加定時器
        addInterval(jqueryDom);
    }
});

第一種：設置彈幕的透明度控制顯隱

下面isShow為全局變量，用來記錄彈幕的狀態。

$(".clear").on("click", function () {
    if (isShow) {
        $(".bullet").css("opacity", 0);
        isShow = false;
    } else {
        $(".bullet").css("opacity", 1);
        isShow = true;
    }
});

這樣的好處就是，定時任務不會終結。我們關閉彈幕，實際上是使彈幕不可見。

第二種：直接終結定時任務，并移除所有彈幕

下面timers是我們設置的一個全局定時任務隊列。

$(".clear").on("click", function () {
    for(var i=0;i
這種就是比較簡單粗暴了，直接終結了所有定時任務，然后移除了所有彈幕。
以上兩種，大家可根據自己的需求去選擇。
最終完整版JS代碼
// 彈幕定時器
var timers = [];
// 控制彈幕顯隱變量
var isShow = true;
// 監聽發送按鈕
$(".send").on("click", function () {
    // 創建彈幕
    var jqueryDom = createScreenbullet($("#screenBulletText").val());
    // 添加定時任務
    addInterval(jqueryDom);
});
// 監聽關閉彈幕按鈕
$(".clear").on("click", function () {
    if (isShow) {
        $(".bullet").css("opacity", 0);
        isShow = false;
    } else {
        $(".bullet").css("opacity", 1);
        isShow = true;
    }   
});
// 新建一個彈幕
function createScreenbullet(text) {
    var jqueryDom = $("
" + text + "
");
    var fontColor = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random()) + ")";
    var fontSize = Math.floor((Math.random() + 1) * 24) + "px";
    var left = $(".screen_container").width() + "px";
    var top = Math.floor(Math.random() * 400) + "px";
    top = parseInt(top) > 352 ? "352px" : top;
    jqueryDom.css({
        "position": "absolute",
        "color": fontColor,
        "font-size": fontSize,
        "left": left,
        "top": top
    });
    $(".screen_container").append(jqueryDom);
    return jqueryDom;
}
// 為彈幕添加定時任務
function addInterval(jqueryDom) {
    var left = jqueryDom.offset().left - $(".screen_container").offset().left;
    var timer = setInterval(function () {
        left--;
        jqueryDom.css("left", left + "px");
        if (jqueryDom.offset().left + jqueryDom.width() < $(".screen_container").offset().left) {
            jqueryDom.remove();
            clearInterval(timer);
        }
    }, 10);
    timers.push(timer);
}
最終效果圖

快給自己刷波666666吧！