在現在的視訊網站,我們在看視訊的時候經常會有彈幕出現,那麼怎麼通過js實作這一效果呢,下面介紹一種簡單的方法。
首先,搭好結構:
頁面中先放一個視訊,視訊下部放一個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="發送" id="btn">
</div>
</div>
再來寫js
首先,我們需要包裝三個函數,也就是發送到彈幕的随機顔色、随機高度和随機字型大小;代碼如下:
<script>
//随機擷取字型顔色函數
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 +')'
}
//随機擷取高度函數
function getRandomHeight(){
var height = $('.top').height()
return Math.random()*height-30
}
//随機擷取字型大小函數
function getRandomFontSize(){
return Math.floor(Math.random()*60)
}
現在我們需要擷取使用者輸入的内容在将内容顯示到頁面中,并且移動,一直到頁面外就消除,代碼如下:
//事件注冊
$('#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('')
})
最後将鍵盤Enter鍵也綁定事件,讓使用者輸入内容後按下Enter鍵和按發送按鈕有同樣的效果:
$('#text').keydown(function(event){
if($('#text').val() ==''){
return
}
if(event.keyCode == 13){
$('#btn').click()
}
})
</script>
最終效果如下
那麼,現在一個簡單的彈幕就制作完成了,歡迎指正。