摘要:使用的的方法實現(xiàn)了文字滾動我們需要做一些準(zhǔn)備工作例如我們?yōu)榱俗審椖豢梢宰冾伾覀儗懥讼旅孢@個方法。判斷存儲彈幕信息的數(shù)據(jù)是否為空隨機抽取數(shù)組中的一個元素之后把它追加到這個中執(zhí)行文字滾動的方法。
怎樣才能跑起來我寫的彈幕程序
資源下載
申請野狗后端云賬號注冊
創(chuàng)建應(yīng)用:
復(fù)制appId到index.html的 var ref = new Wilddog("https://
可以跑起來了!
怎樣才能做一個這樣的應(yīng)用程序呢?成果圖:
我們要使用HTML和CSS畫一個界面,如下:
具體代碼就不一一介紹了,如果你想直接使用狗場的界面UI,請復(fù)制下面的代碼:
這個HTML和CSS是前端的基礎(chǔ),這個我們不多說,我們主要來看一下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方法實現(xiàn)了文字滾動 obj.animate({left:"-"+_left+"px"}, time, function(){ obj.remove(); }); }
我們需要做一些準(zhǔn)備工作,例如:我們?yōu)榱俗審椖豢梢宰冾伾覀儗懥讼旅孢@個方法。
//隨機獲取一個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í)行文字滾動的方法。
var getAndRun = function() { //判斷存儲彈幕信息的數(shù)據(jù)是否為空 if (arr.length > 0) { var n = Math.floor(Math.random() * arr.length + 1) - 1; //隨機抽取arr數(shù)組中的一個元素,之后把它追加到.d_show這個div中 var textObj = $("" + arr[n] + ""); $(".d_show").append(textObj); //執(zhí)行文字滾動的方法。 moveObj(textObj); } setTimeout(getAndRun, 3000); }
以下是我們的全部JS代碼,帶有非常詳細(xì)的注釋。希望你們能看懂。
但是還是沒有加上視頻的功能,這個我要好好想一想!
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/90933.html
摘要:使用的的方法實現(xiàn)了文字滾動我們需要做一些準(zhǔn)備工作例如我們?yōu)榱俗審椖豢梢宰冾伾覀儗懥讼旅孢@個方法。判斷存儲彈幕信息的數(shù)據(jù)是否為空隨機抽取數(shù)組中的一個元素之后把它追加到這個中執(zhí)行文字滾動的方法。 怎樣才能跑起來我寫的彈幕程序 資源下載 申請野狗后端云賬號注冊 創(chuàng)建應(yīng)用:showImg(https://segmentfault.com/img/remote/146000000683932...
摘要:使用的的方法實現(xiàn)了文字滾動我們需要做一些準(zhǔn)備工作例如我們?yōu)榱俗審椖豢梢宰冾伾覀儗懥讼旅孢@個方法。判斷存儲彈幕信息的數(shù)據(jù)是否為空隨機抽取數(shù)組中的一個元素之后把它追加到這個中執(zhí)行文字滾動的方法。 怎樣才能跑起來我寫的彈幕程序 資源下載 申請野狗后端云賬號注冊 創(chuàng)建應(yīng)用:showImg(https://segmentfault.com/img/remote/146000000683932...
showImg(https://segmentfault.com/img/bVbk1Nl?w=1080&h=602); 說起彈幕看過視頻的都不會陌生,那滿屏充滿著飄逸評論的效果,讓人如癡如醉,無法自拔 最近也是因為在學(xué)習(xí)關(guān)于 canvas 的知識,所以今天就想和大家分享一個關(guān)于彈幕的故事 那么究竟彈幕是怎樣煉成的呢? 我們且往下看(look) 看什么?看效果 showImg(https://s...
摘要:組件提供了一系列的操作接口以方便用戶對彈幕的相關(guān)特性進(jìn)行定制。對于這種類型的圖像,我們可以使用色鍵的方式進(jìn)行摳圖生成蒙版。其中,用于更新蒙版的接口為。 導(dǎo)讀:本文內(nèi)容是筆者最近實現(xiàn)的 web 端彈幕組件—— Barrage UI 的一個延伸。在閱讀本文的實例和相關(guān)代碼之前,不妨先瀏覽項目文檔,對組件的使用方式和相關(guān)接口進(jìn)行了解。 各位童鞋如果經(jīng)常上 B 站(bilibili.com) ...
閱讀 821·2021-11-25 09:43
閱讀 1690·2021-09-29 09:42
閱讀 1902·2019-08-30 15:55
閱讀 3423·2019-08-30 15:54
閱讀 2629·2019-08-30 13:20
閱讀 3514·2019-08-29 13:25
閱讀 925·2019-08-28 18:03
閱讀 1787·2019-08-26 13:44