使用jQuery怎么實現一個實現彈幕功能

這期內容當中小編將會給大家帶來有關使用jQuery怎么實現一個實現彈幕功能，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

首先，搭好結構：

頁面中先放一個視頻，視頻下部放一個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('')
})

最后將鍵盤回車鍵也綁定事件，讓用戶輸入內容后按下回車鍵和按發送按鈕有同樣的效果：

$('#text').keydown(function(event){
  if($('#text').val() ==''){
  return
} 
if(event.keyCode == 13){
  $('#btn').click()
}

})

</script>

上述就是小編為大家分享的使用jQuery怎么實現一個實現彈幕功能了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。