基于jquery实现弹幕效果

用js写的一个弹幕
效果图：

源码：

<html> 

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--
  <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
  <link href="favicon.ico" rel="Bookmark" type="image/x-icon" />
  -->
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>JQuery弹幕</title>
    <link href="" rel="stylesheet" /> 

    </script>
    <style type="text/css">
      body {
        overflow: hidden;
      } 

      .content {
        overflow: hidden;
      } 

      .ctxt {
        background: burlywood;
        width: 100%;
        overflow: hidden;
        margin: 0 auto;
        z-index: 9999;
      } 

      .ctxt p { 

        left: 95%;
        margin: 0;
        padding: 0;
        z-index: 99;
        overflow: hidden;
      } 

      #msg{
        height: 24px;
        width: 200px;
      } 

      #barrage {
        color: gainsboro;
        border: 1px solid aqua;
        font-size: 12px;
        border-radius: 10px;
        float: right;
      } 

      #style {
        margin-top: 10px;
      } 

      #publish {
        display: none;
      } 

      video { 

        width: 100%;
        overflow: hidden;
        z-index: -99999;
      } 

      #danmu {
        position: absolute;
        overflow: hidden;
        font-size:20px;
      }
    </style>
  </head> 

  <body>
    <div class="content"> 

      <div id="" class="ctxt">
        <video id="vodio" autoplay="autoplay">
          <source src="video/1429411761ed3dc100c73251.mp4" type="video/mp4">
          </source> 

        </video>
      </div> 

      <div id="style">
        <button id="barrage"> <font style="color: white;">开始弹幕</font></button>
        <div id="publish">
          <form method="post" align="center">
            <input type="text" id="msg" />
            <button type="button" id="submitBut">发布</button>
          </form>
        </div> 

      </div>
    </div>
      <script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $("#barrage").click(function() {
          $("#publish").toggle();
        }); 

        $("#submitBut").click(function() { 

          var msgtxt = $("#msg").val(); 

          var colortxt = getReandomColor();
          var topPos = generateMixed(3); 

          if(topPos > 500) {
            topPos = 30;
          }
          var newtxt = '<p id="danmu" style="top:' + topPos + 'px; color:' + colortxt + '">' + $("#msg").val() + '</p>';
          $(".ctxt").prepend(newtxt);
          var addTextW = $(".ctxt").find("p").width();
          $(".ctxt p").animate({
            left: '-' + addTextW + 20 + "px"
          }, 30000, function() {
            $(this).hide();
          });
          $("#msg").val(" ");
        }); 

      });
      //随机获取颜色值
      function getReandomColor() {
        return '#' + (function(h) {
          return new Array(7 - h.length).join("0") + h
        })((Math.random() * 0x1000000 << 0).toString(16))
      } 

      //生成随机数据。n表示位数
      var jschars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; 

      function generateMixed(n) {
        var res = "";
        for(var i = 0; i < n; i++) {
          var id = Math.ceil(Math.random() * 9);
          res += jschars[id];
        }
        return res;
      }
    </script> 

  </body> 

</html> 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。