成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

讓彈幕給 PPD 生個(gè)孩子

linkFly / 1005人閱讀

摘要：使用的的方法實(shí)現(xiàn)了文字滾動(dòng)我們需要做一些準(zhǔn)備工作例如我們?yōu)榱俗審椖豢梢宰冾伾覀儗懥讼旅孢@個(gè)方法。判斷存儲彈幕信息的數(shù)據(jù)是否為空隨機(jī)抽取數(shù)組中的一個(gè)元素之后把它追加到這個(gè)中執(zhí)行文字滾動(dòng)的方法。

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

資源下載

申請野狗后端云賬號注冊

創(chuàng)建應(yīng)用：

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

可以跑起來了!

怎樣才能做一個(gè)這樣的應(yīng)用程序呢？

成果圖：

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

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

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

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方法實(shí)現(xiàn)了文字滾動(dòng)
        obj.animate({left:"-"+_left+"px"}, time, function(){
            obj.remove();
        });
    }

我們需要做一些準(zhǔn)備工作,例如:我們?yōu)榱俗審椖豢梢宰冾伾覀儗懥讼旅孢@個(gè)方法。

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

之后我們把文字獲取過來,并且執(zhí)行文字滾動(dòng)的方法。

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

        setTimeout(getAndRun, 3000);
    }

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111541.html

相關(guān)文章

  • 讓彈幕給 PPD 生個(gè)孩子

    摘要：使用的的方法實(shí)現(xiàn)了文字滾動(dòng)我們需要做一些準(zhǔn)備工作例如我們?yōu)榱俗審椖豢梢宰冾伾覀儗懥讼旅孢@個(gè)方法。判斷存儲彈幕信息的數(shù)據(jù)是否為空隨機(jī)抽取數(shù)組中的一個(gè)元素之后把它追加到這個(gè)中執(zhí)行文字滾動(dòng)的方法。 怎樣才能跑起來我寫的彈幕程序 資源下載 申請野狗后端云賬號注冊 創(chuàng)建應(yīng)用：showImg(https://segmentfault.com/img/remote/146000000683932...

    RyanHoo 評論0 收藏0

  • 讓彈幕給 PPD 生個(gè)孩子

    摘要：使用的的方法實(shí)現(xiàn)了文字滾動(dòng)我們需要做一些準(zhǔn)備工作例如我們?yōu)榱俗審椖豢梢宰冾伾覀儗懥讼旅孢@個(gè)方法。判斷存儲彈幕信息的數(shù)據(jù)是否為空隨機(jī)抽取數(shù)組中的一個(gè)元素之后把它追加到這個(gè)中執(zhí)行文字滾動(dòng)的方法。 怎樣才能跑起來我寫的彈幕程序 資源下載 申請野狗后端云賬號注冊 創(chuàng)建應(yīng)用：showImg(https://segmentfault.com/img/remote/146000000683932...

    Pikachu 評論0 收藏0

  • 彈幕，是怎樣練成的？

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

    lwx12525 評論0 收藏0

  • 【小案例】基于色鍵技術(shù)的純客戶端實(shí)時(shí)蒙版彈幕

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

    muzhuyu 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<