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

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

項(xiàng)目結(jié)構(gòu)非常簡(jiǎn)單，非常標(biāo)準(zhǔn)的html+css+js的結(jié)構(gòu)。這里我們用了第三方的jQuery庫(kù)來幫助我們完成這個(gè)彈幕效果。如果有興趣的話，可以嘗試一下用原生js去實(shí)現(xiàn)這個(gè)功能，看完這篇文章相信你也可以輕輕松松地用原生js實(shí)現(xiàn)。

    
    
    
    
    


    

    

        
        發(fā)射
        關(guān)閉彈幕
    

這里我們頁(yè)面的布局非常簡(jiǎn)單，主要分為上下兩個(gè)div：

div.screen_container作為我們的彈幕墻，這里將會(huì)放我們發(fā)射的彈幕內(nèi)容。

div.screen_toolbar包含一個(gè)輸入框用于輸入我們需要發(fā)射的彈幕內(nèi)容、一個(gè)發(fā)射按鈕和一個(gè)關(guān)閉彈幕按鈕。

另外就是引入第三方庫(kù)以及我們自己的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的來稍微美化一下我們的布局，這里不設(shè)置我們的彈幕的樣式。

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

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

這里我們需要注意以下幾點(diǎn)：

這里我們是根據(jù)定位父級(jí)div.screen_container進(jìn)行定位，這里我們的彈幕值left值都是div.screen_container寬度（即：每個(gè)彈幕都從彈幕墻的最右邊向左移動(dòng)）。

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

不要忘記給每個(gè)彈幕設(shè)置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);
}

這里我們需要注意以下幾點(diǎn)：

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

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

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

如果我們想體驗(yàn)更好一點(diǎn)，可以加個(gè)Enter按鈕監(jiān)聽。

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

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

下面isShow為全局變量，用來記錄彈幕的狀態(tài)。

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

這樣的好處就是，定時(shí)任務(wù)不會(huì)終結(jié)。我們關(guān)閉彈幕，實(shí)際上是使彈幕不可見。

第二種：直接終結(jié)定時(shí)任務(wù)，并移除所有彈幕

下面timers是我們?cè)O(shè)置的一個(gè)全局定時(shí)任務(wù)隊(duì)列。

$(".clear").on("click", function () {
    for(var i=0;i
這種就是比較簡(jiǎn)單粗暴了，直接終結(jié)了所有定時(shí)任務(wù)，然后移除了所有彈幕。
以上兩種，大家可根據(jù)自己的需求去選擇。
最終完整版JS代碼
// 彈幕定時(shí)器
var timers = [];
// 控制彈幕顯隱變量
var isShow = true;
// 監(jiān)聽發(fā)送按鈕
$(".send").on("click", function () {
    // 創(chuàng)建彈幕
    var jqueryDom = createScreenbullet($("#screenBulletText").val());
    // 添加定時(shí)任務(wù)
    addInterval(jqueryDom);
});
// 監(jiān)聽關(guān)閉彈幕按鈕
$(".clear").on("click", function () {
    if (isShow) {
        $(".bullet").css("opacity", 0);
        isShow = false;
    } else {
        $(".bullet").css("opacity", 1);
        isShow = true;
    }   
});
// 新建一個(gè)彈幕
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;
}
// 為彈幕添加定時(shí)任務(wù)
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吧！