jQuery 之簡單彈幕製作

2021-10-11 18:30:34 字數 1339 閱讀 5167

class


="box"


>


class


="top"


>


src=


"./static/夢然-少年 .mp4"


controls


autoplay


muted


>


audio


>


div>


class


="foot"


>


type


="text"


name="


" id


="text"


>


type


="button"


value


="傳送"


id="btn"


>


div>


div>
首先，我們需要包裝三個函式，也就是傳送到彈幕的隨機顏色、隨機高度和隨機字型大小；**如下：

//隨機獲取字型顏色函式


function


getrandomcolor()


//隨機獲取高度函式


function


getrandomheight()


//隨機獲取字型大小函式


function


getrandomfontsize()
現在我們需要獲取使用者輸入的內容在將內容顯示到頁面中，並且移動，一直到頁面外就消除，**如下：

//事件註冊$(


'#btn').


on('click'


,function()


$('')


.text($


('#text').


val())


.css()


.animate(,


10000


,'linear'


,function()


).($


('.top'))


$('#text').


val('')


})
最後將鍵盤回車鍵也繫結事件，讓使用者輸入內容後按下回車鍵和按傳送按鈕有同樣的效果：

$


('#text').


keydown


(function


(event)


if(event.keycode ==13)


})<


/script>
最終效果如下

那麼，現在乙個簡單的彈幕就製作完成了，歡迎指正。

jQuery製作隨機色彈幕牆

性子急的朋友可以直接去看 和效果演示 戳我 介面製作就不囉嗦了，後面會放上 先講一下關鍵技術。實現思路 點選傳送彈幕，就會將輸入的值儲存進乙個陣列裡，並且將當前輸入的在彈幕顯示框顯示出來，同時後台也一直從該陣列中每隔一段時間隨機抽取一條記錄顯示出來。點選關閉彈幕會清空彈幕牆並且停止後台的讀取，同時將...

Jquery實現彈幕效果

前端顯示 吐槽 發射 樣式 html,body boxdom iddom content title text btn string js function crespan.css 擴充套件字幕顏色 var spandom boxdom span last child alert spandom.h...

iOS 簡單彈幕效果

彈幕的簡單效果就是這樣，我是仿照別人的簡單例項做了簡單的彈幕 廢話少說進入正題 簡單的思路來說就是在螢幕上顯示lable，這些lable的位置顏色以及內容不一樣 第一步 建立乙個plist用於儲存資料 第二步 建立控制器用於顯示彈幕，並將此控制器作為window的跟控制器 第三步 寫乙個方法用來建立...