基于jquery实现弹幕效果

2019-11-20 08:50:21

字体：大中小

来源：转载

供稿：网友

用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>

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

上一篇：js仿小米官网图片轮播特效

下一篇：js获取Get值的方法