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等。

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

简单的弹幕插件

文章目录

HTML

css

js

猜你喜欢