基于jquery实现弹幕效果

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

源码：

rush:xhtml;"> <Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Meta name="viewport" content="width=device-width,initial-scale=1"> <Meta name="Generator" content="EditPlus®"> <Meta name="Author" content=""> <Meta name="Keywords" content=""> <Meta name="Description" content=""> JQuery弹幕

</script> 
<style type="text/css"&gt; 
  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 { 
    <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play: none; 
  } 

  video { 

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

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

  <div id="" class="ctxt"&gt; 
    <video id="vo<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>" a<a href="https://www.jb51.cc/tag/utop/" target="_blank" class="keywords">utop</a>lay="a<a href="https://www.jb51.cc/tag/utop/" target="_blank" class="keywords">utop</a>lay"&gt; 
      <source src="video/1429411761ed3dc100c73251.mp4" type="video/mp4"&gt; 
      </source> 

    </video> 
  </div> 

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

  </div> 
</div> 
  <script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script> 
<script type="text/javascript"&gt; 
  $(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 + '"&gt;' + $("#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(" ");  
    }); 

  }); 
  //<a href="https://www.jb51.cc/tag/suiji/" target="_blank" class="keywords">随机</a><a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>颜色值  
  function getReandomColor() { 
    return '#' + (function(h) { 
      return new Array(7 - h.length).join("0") + h 
    })((Math.random() * 0x1000000 << 0).toString(16)) 
  } 

  //<a href="https://www.jb51.cc/tag/shengcheng/" target="_blank" class="keywords">生成</a><a href="https://www.jb51.cc/tag/suiji/" target="_blank" class="keywords">随机</a>数据。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>

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

jquery 弹幕

上一篇：jQuery模拟Marquee实现无缝滚动效果下一篇：jQuery视差滚动效果网页实现方法经

基于jquery实现弹幕效果

相关推荐