简单的弹幕插件

Myth丶恋晨 2022-02-26 00:44 268阅读 0赞

基于jQuery实现的简单弹幕功能

### 文章目录 ###

*  HTML
 *  css
 *  js

# HTML #

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>danmu</title>
      <link rel="stylesheet" href="../plugins/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.css">
      <link rel="stylesheet" href="../css/index.css">
    </head>
    <body>
      <div class="content">
        <div class="show-box">
          <div class="danmu"></div>
        </div>
        <div class="text-box">
          <input type="text" value="说点什么？" id="please_text">
          <div class="text-button">
            <button type="button" class="btn btn-primary" id="send">发射</button>
            <button type="button" class="btn btn-danger" id="clean">清屏</button>
          </div>
        </div>
      </div>
    </body>
    <script src="../plugins/jquery/jquery-3.3.1.js"></script>
    <script src="../plugins/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="../js/index.js"></script>
    </html>

# css #

body {
        
      display: flex;
      text-align: center;
    }
    .content {
        
      margin: 0 auto;
    }
    .show-box {
        
      width: 1200px;
      height: 500px;
      border: 1px solid #ccc; 
    }
    #please_text {
        
      margin-top: 30px;
    }
    #send {
        
      margin-top: 30px;
    }
    #clean {
        
      margin-top: 30px;
    }
    .danmu {
        
        position: fixed;
        left: 100%;
        animation: danmu 10s ease 0s 1;
      }
      @keyframes danmu {
        
        from {
        
          left: 100%;
          transform: translateX(0);
        }
        to {
        
          left: 0;
          transform: translateX(-100%);
        }
      }

# js #

$(function(){
        
      //mouseover后获取焦点，并全选文本框内容
      $("#please_text").mouseover(function(){
        
        // $("#please_text").val("aaaa")
        $("#please_text").focus()
        $("#please_text").select()
        //如果input的value值为默认值则清空
        if ($("#please_text").val()=="说点什么？"){
        
          $("#please_text").val("") 
        }
      })
    
      //mouseleave后失去焦点
      $("#please_text").mouseleave(function(){
        
        $("#please_text").blur()
        if ($("#please_text").val()=="") {
        
          $("#please_text").val("说点什么？")
        }
      })
    
      $(".text-button").each(function(){
        
        //点击发射按钮
        $("#send").click(function(){
        
          //创建弹幕飞过的区域
          $(".show-box").append("<div class='danmu'></div>")
          //将文本框输入内容追加到弹幕框中
          $(".danmu:last-child").append($("#please_text").val())
        })
      })
      
      //点击清屏按钮
      $("#clean").click(function(){
        
        $(".danmu").html("")
      })
    });

插件使用了jQuery、bootstrap等。

插件有待改进，比如设置多条弹幕轨道、弹幕不碰撞、同一轨道中两条相邻弹幕出现的延时、发送文字链接等弹幕格式、弹幕样式等。