視頻網站彈幕開發

從學習html，css，js兩三個月了，總覺得學習的不夠深、不夠透，就像犯錯時聽老師的教導，總是左耳進，右耳出。於是就從網上找一個實戰例子來增加一下自己的記憶，剛好看到有個基礎課程，視頻網站彈幕開發，就自己照着敲一下，寫一下自己的理解。

現在絕大部分的視頻網站都提供了彈幕的功能，讓我們在看視頻之余，還可以隨心所欲地吐槽一下，那今天我們就來探索視頻網站彈幕開發（沒有后端）。

 

效果圖：

 

原料：

phpstorm(曾經討論過編輯器，其實記事本最厲害，編輯器不重要，重要的是寫代碼的人。LOL中，英雄並不重要，重要的是使用英雄的人)
jQuery類庫
html
css

 

 

用到的jQuery方法：

toggle([speed],[easing],[fn])

　　用於綁定兩個或多個事件處理器函數，以響應被選元素的輪流的 click 事件。

　　如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。

speed: 隱藏/顯示 效果的速度。默認是 "0"毫秒。可能的值：slow，normal，fast。"

easing:(Optional) 用來指定切換效果，默認是"swing"，可用參數"linear"

fn:在動畫完成時執行的函數，每個元素執行一次。

animate(params,[speed],[easing],[fn])

　　用於創建自定義動畫的函數。

　　這個函數的關鍵在於指定動畫形式及結果樣式屬性對象。這個對象中每個屬性都表示一個可以變化的樣式屬性（如“height”、“top”或“opacity”）。注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left.

　　而每個屬性的值表示這個樣式屬性到多少時動畫結束。如果是一個數值，樣式屬性就會從當前的值漸變到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字符串值，則會為該屬性調用默認的動畫形式。

　　在 jQuery 1.2 中，你可以使用 em 和 % 單位。另外，在 jQuery 1.2 中，你可以通過在屬性值前面指定 "<em>+=</em>" 或 "<em>-=</em>" 來讓元素做相對運動。

params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合

speed:三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)

easing:要使用的擦除效果的名稱(需要插件支持).默認jQuery提供"linear" 和 "swing".

fn:在動畫完成時執行的函數，每個元素執行一次。

append(content|fn)

　　向每個匹配的元素內部追加內容。

　　這個操作與對指定的元素執行appendChild方法，將它們添加到文檔中的情況類似。

content:要追加到目標中的內容

 

上面是查API拷貝過來的。

第一個方法用來打開、關閉彈幕，第二個方法是讓彈幕動起來的，第三個方法是添加新的彈幕。

 

過程：

step 1：寫一個html頁面

step 2：寫一個塊<div>作為彈幕的開啟open

step 3：寫一個塊<div>承載彈幕screen

　　在這個<div>上面有三部分：

　　　　關閉close<div>

　　　　彈幕顯示show<div>

　　　　發射彈幕send<div>（兩個input，一個type="text",一個type="button")

<div style="text-align: center;">
    <br /><br /><br /><br /><br /><br /><br /><br />
    <h1><a id="dm-open" href="#">客官，你點我啊</a></h1>
</div>
<div class="dm">
    <div class="dm-screen">
        <div id="dm-close"><a href="#">X</a></div>
        <div class="dm-show">
            <div>愛你</div>
            <div>一生中最愛</div>
            <div>偏偏喜歡你</div>
            <div>只想一生跟你走</div>
        </div>
    </div>
    <div class="dm-send">
        <div class="dm-sub">
            <input id="dm-txt" type="text" value="請輸入你想說的話" title=""/>
            <input id="dm-btn" type="button" value="發射彈幕" />
        </div>
    </div>
</div>

 

 step 4：寫css部分代碼(太多了，我也是想到什么就寫什么的，沒什么頭緒）

　　如：根據上面塊的划分：

　　　open 只有一個鏈接a，a{text-decoration:none;} a:hover{text-decoration:underline;}

　　　screen 用來顯示彈幕內容 screen{background-color:#000000;opacity:o.5}

　　   close 設置為圓角、右上角 close{border-radius:19px;//大小為塊大小的一半}

　　   show 只要設置一下字體的大小 show{font-size:22px;}

　　　send 在底部{bottom:0;},有一個輸入框和一個按鈕，添加圓角 #txt{border-radius:8px}

<style>
        *{
            margin:0;padding:0;
        }
        a{
            text-decoration:none;
        }
        a:hover{
            text-decoration:underline;
        }
        body{
            font-family:serif;
        }
        .dm{
            height:100%;
            width:100%;
            position:absolute;
            top:0;
            left:0;
            display:none;
        }
        .dm-screen{
            height:100%;
            width:100%;
            position:absolute;
            top:0;
            left:0;
            background-color: #000000;
            opacity:0.5;
            z-index:1;
        }
        #dm-close{
            width:38px;
            height:38px;
            position:absolute;
            top:20px;
            right:20px;
            background-color:#fff;
            border-radius:19px;
            border:1px solid #000;
            text-align:center;
            line-height:38px;
            color:white;
            font-size:32px;
            z-index:3;
        }
        #dm-close a:hover{
            color:white;
        }
        #dm-close:hover{
            background-color:red;

        }
        .dm-show{
            position:relative;
        }
        .dm-show div{
            font-size:22px;
            position:absolute;
            /*right:0;*/
            z-index:2;
            color:#ffffff;
        }
        .dm .dm-send{
            position:absolute;
            height: 88px;
            width:100%;
            background-color:#000;
            bottom:0;
            z-index:1;
            border-radius:4px;
        }
        .dm .dm-send .dm-sub{
            height:88px;
            text-align:center;
            line-height:100px;
        }
        .dm .dm-send .dm-sub #dm-txt{
            height:48px;
            width:480px;
            border:0;
            border-radius:8px;
            font-size:18px;
        }
        .dm .dm-send .dm-sub #dm-btn{
            height:48px;
            width:66px;
            border:0;
            background-color: #65c33d;
            color:#fff;
            border-radius:8px;
        }
        .dm .dm-send .dm-sub #dm-btn:hover{
            background-color: #3eaf0e;
        }
    </style>

step 5：js代碼

　　初始化彈幕：init_screen()

　　open點擊事件實現彈幕開啟

　　open.toggle()

　　show里面的文字動起來

　　show.animate();

　　添加彈幕

　　show.append(div);

　　為了可以得到隨機的顏色，借用了getRandomColor()方法

　　代碼如下：

<script>
    $(function(){
        //打開、關閉彈幕
        $("#dm-open,#dm-close").click(function(){
            $(".dm").toggle(1000);
        });
        //添加彈幕內容
        $("#dm-btn").click(function(){  
            var txt=$("#dm-txt").val();
            var div="<div>"+txt+"<div>";
            $(".dm-show").append(div);
            init_screen();
        });
        init_screen();
    });
    function init_screen(){
        var _top=0;
        $(".dm-show").find("div").show().each(function(){
            //獲取彈幕初始位置：讓它在最右邊
            var _left=$(window).width()-$(this).width();
            var _height=$(window).height();

            $(this).css({left:_left,top:_top,color:getRandomColor()});

            _top=_top+66;
            if(_top>=_height-100)
                _top=0;

            var time=16000;
            if($(this).index()%2==0)
                    time=20000;
            //jQuery動畫
            $(this).animate({left:'-'+_left+'px'},time,"linear");

        });
    }
    //獲取隨機顏色
    var getRandomColor = function(){
        return  '#' +
                (function(color){
                    return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])
                    && (color.length == 6) ? color : arguments.callee(color);
                })('');
    }
</script>    

最后，就是驗證成果的時候，輸入一堆無關的話，一直點“發射彈幕”。另外，適應不了手機，於是添加了<meta name="viewport" content="width=device-width,initial-scale=1.0" />自適應，效果有限，應該是自己的CSS代碼寫得不好。

 

心得：寫頁面之前，要心中有框架，再去想實現。