基于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="http://www.gimoo.net/t/1812/favicon.ico" rel="shortcut icon" type="image/x-icon" />  
  <link href="http://www.gimoo.net/t/1812/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="http://www.gimoo.net/t/1812/5c0ca1524d2be.html" 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="http://www.gimoo.net/t/1812/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="http://www.gimoo.net/t/1812/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>

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

jquery

#免责声明#

本站[绿夏技术导航]提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序或内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件[admin@lxwl520.com]与我们联系进行删除处理。敬请谅解！

文章分类