讓彈幕給 PPD 生個孩子

RyanHoo 發布于2019-08-01 15:42 / 623人閱讀

摘要：使用的的方法實現了文字滾動我們需要做一些準備工作例如我們為了讓彈幕可以變顏色我們寫了下面這個方法。判斷存儲彈幕信息的數據是否為空隨機抽取數組中的一個元素之后把它追加到這個中執行文字滾動的方法。

怎樣才能跑起來我寫的彈幕程序

資源下載

申請野狗后端云賬號注冊

創建應用：

復制appId到index.html的 var ref = new Wilddog("https://.wilddogio.com"); 處

可以跑起來了!

怎樣才能做一個這樣的應用程序呢？

成果圖：

我們要使用HTML和CSS畫一個界面，如下：

具體代碼就不一一介紹了,如果你想直接使用狗場的界面UI,請復制下面的代碼:

這個HTML和CSS是前端的基礎,這個我們不多說,我們主要來看一下JS代碼:
彈幕是滾動的,所以我們寫了一個可以讓對象移動的方法。

var moveObj = function(obj) {
        var _left = $(".d_mask").width() - obj.width();
        _top = _top + 50;
        if(_top > (topMax - 50)){
            _top = topMin;
        }
        obj.css({left:_left,top:_top,color:getReandomColor()});
        var time = 20000 + 10000 * Math.random();
        //使用的JQuery的animate方法實現了文字滾動
        obj.animate({left:"-"+_left+"px"}, time, function(){
            obj.remove();
        });
    }

我們需要做一些準備工作,例如:我們為了讓彈幕可以變顏色我們寫了下面這個方法。

//隨機獲取一個RGB格式顏色,關于什么是RGB格式的顏色,請百度
var getReandomColor = function() {
        return "#"+(function(h){
            return new Array(7-h.length).join("0")+h
            })((Math.random()*0x1000000<<0).toString(16))
}

之后我們把文字獲取過來,并且執行文字滾動的方法。

var getAndRun = function() {
        //判斷存儲彈幕信息的數據是否為空
        if (arr.length > 0) {
            var n = Math.floor(Math.random() * arr.length + 1) - 1;
            //隨機抽取arr數組中的一個元素,之后把它追加到.d_show這個div中
            var textObj = $("" + arr[n] + "");
            $(".d_show").append(textObj);
            //執行文字滾動的方法。
            moveObj(textObj);
        }

        setTimeout(getAndRun, 3000);
    }

以下是我們的全部JS代碼,帶有非常詳細的注釋。希望你們能看懂。

但是還是沒有加上視頻的功能,這個我要好好想一想!

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50062.html

讓彈幕給 PPD 生個孩子

摘要：使用的的方法實現了文字滾動我們需要做一些準備工作例如我們為了讓彈幕可以變顏色我們寫了下面這個方法。判斷存儲彈幕信息的數據是否為空隨機抽取數組中的一個元素之后把它追加到這個中執行文字滾動的方法。怎樣才能跑起來我寫的彈幕程序資源下載申請野狗后端云賬號注冊創建應用：showImg(https://segmentfault.com/img/remote/146000000683932...

linkFly 2019-08-29 11:16 評論0 收藏0
讓彈幕給 PPD 生個孩子

摘要：使用的的方法實現了文字滾動我們需要做一些準備工作例如我們為了讓彈幕可以變顏色我們寫了下面這個方法。判斷存儲彈幕信息的數據是否為空隨機抽取數組中的一個元素之后把它追加到這個中執行文字滾動的方法。怎樣才能跑起來我寫的彈幕程序資源下載申請野狗后端云賬號注冊創建應用：showImg(https://segmentfault.com/img/remote/146000000683932...

Pikachu 2019-08-22 10:37 評論0 收藏0
彈幕，是怎樣練成的？

showImg(https://segmentfault.com/img/bVbk1Nl?w=1080&h=602); 說起彈幕看過視頻的都不會陌生，那滿屏充滿著飄逸評論的效果，讓人如癡如醉，無法自拔最近也是因為在學習關于 canvas 的知識，所以今天就想和大家分享一個關于彈幕的故事那么究竟彈幕是怎樣煉成的呢？我們且往下看(look) 看什么？看效果 showImg(https://s...

lwx12525 2019-08-23 14:02 評論0 收藏0
【小案例】基于色鍵技術的純客戶端實時蒙版彈幕

摘要：組件提供了一系列的操作接口以方便用戶對彈幕的相關特性進行定制。對于這種類型的圖像，我們可以使用色鍵的方式進行摳圖生成蒙版。其中，用于更新蒙版的接口為。導讀：本文內容是筆者最近實現的 web 端彈幕組件—— Barrage UI 的一個延伸。在閱讀本文的實例和相關代碼之前，不妨先瀏覽項目文檔，對組件的使用方式和相關接口進行了解。各位童鞋如果經常上 B 站（bilibili.com） ...

muzhuyu 2019-08-23 14:50 評論0 收藏0