jQuery實現(xiàn)簡單彈幕制作
更新時間：2020年12月10日 17:07:53 作者：cody0622
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡單彈幕制作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在現(xiàn)在的視頻網(wǎng)站，我們在看視頻的時候經(jīng)常會有彈幕出現(xiàn)，那么怎么通過js實現(xiàn)這一效果呢，下面介紹一種簡單的方法。
首先，搭好結(jié)構(gòu)：
頁面中先放一個視頻，視頻下部放一個input 標簽和button按鈕，代碼如下：
<div class="box"> <div class="top"> <video src="./static/夢然-少年 .mp4" controls autoplay muted></audio> </div> <div class="foot"> <input type="text" name="" id="text"> <input type="button" value="發(fā)送" id="btn"> </div> </div>
再來寫js
首先，我們需要包裝三個函數(shù)，也就是發(fā)送到彈幕的隨機顏色、隨機高度和隨機字體大??；代碼如下：
<script>
//隨機獲取字體顏色函數(shù)
function getRandomColor(){
var r = Math.floor(Math.random()*255);
var g = Math.floor(Math.random()*255);
var b = Math.floor(Math.random()*255);
return 'rgb('+r+','+g+','+ b +')'
}
//隨機獲取高度函數(shù)
function getRandomHeight(){
var height = $('.top').height()
return Math.random()*height-30
}
//隨機獲取字體大小函數(shù)
function getRandomFontSize(){
return Math.floor(Math.random()*60)
}
現(xiàn)在我們需要獲取用戶輸入的內(nèi)容在將內(nèi)容顯示到頁面中，并且移動，一直到頁面外就消除，代碼如下：
//事件注冊
$('#btn').on('click',function(){
if($('#text').val() ==''){
return
}
$('<span></span>').text($('#text').val()).css({
'position':'absolute',
'width':200,
'height':50,
'color':getRandomColor(),
'fontSize':getRandomFontSize(),
'right':-200,
'top':getRandomHeight()
}).animate({right:1000},10000,'linear',function(){
$(this).remove()
}).appendTo($('.top'))
$('#text').val('')
})
最后將鍵盤回車鍵也綁定事件，讓用戶輸入內(nèi)容后按下回車鍵和按發(fā)送按鈕有同樣的效果：
$('#text').keydown(function(event){
if($('#text').val() ==''){
return
}
if(event.keyCode == 13){
$('#btn').click()
}
})
</script>
最終效果如下
那么，現(xiàn)在一個簡單的彈幕就制作完成了。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了簡潔實用的BootStrap jQuery手風琴插件知識，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2016-08-08
這篇文章主要介紹了詳解ECharts使用心得總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
jquery設(shè)置css樣式的多種方法(總結(jié))
下面小編就為大家?guī)硪黄猨query設(shè)置css樣式的多種方法(總結(jié))。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章介紹了jQuery 無刷新分頁實例代碼，有需要的朋友可以參考一下2013-11-11
resize事件是在窗口或框架的大小被調(diào)整時發(fā)生，包括最小化、最大化。在IE和Opera瀏覽器中，只要窗口邊框被拖動，就觸發(fā)該事件，在Mozilla瀏覽器中，resize 事件只是在停止改變窗口大小時才會觸發(fā)。2011-07-07
系統(tǒng)默認情況下，使用Tab按鍵切換頁面元素的焦點，有沒有想過回車鍵Enter也可以實現(xiàn)這種功能，并且具有良好的用戶體驗。2010-09-09
本文為大家收集了10個非?？岬?jQuery 工具提示（Tooltip）插件，希望大家能喜歡2011-10-10
本文重點給大家介紹了jQuery中的2個函數(shù)hover和toggle的使用方法和示例，非常的簡單實用，推薦給小伙伴們參考下。2015-02-02
一個用jQuery實現(xiàn)的下拉菜單，非常的簡單，學習jquery 的朋友可以參考下。2010-07-07
jQuery實現(xiàn)的網(wǎng)頁豎向菜單效果代碼
這篇文章主要介紹了jQuery實現(xiàn)的網(wǎng)頁豎向菜單效果代碼,涉及jquery控制頁面元素簡單折疊與展開功能,非常簡單實用,需要的朋友可以參考下2015-08-08