基于jquery实现弹幕效果

时间:2020-05-15 一直在路上前行人气:0
用jquery写的一个弹幕，供大家参考，具体内容如下
效果图：
源码：
<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>
加载全部内容