1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 html,body{ 13 width: 100%; 14 height: 100%; 15 } 16 p{ 17 display: inline-block; 18 } 19 20 span{ 21 position: absolute; 22 } 23 .boxDom{ 24 width: 100%; 25 height: 100%; 26 position: relative; 27 overflow: hidden; 28 } 29 .idDom{ 30 width: 100%; 31 height: 20%; 32 position: fixed; 33 bottom: 0; 34 background-color: #ccc; 35 } 36 .content{ 37 position: absolute; 38 top:0; 39 right: 0; 40 left:0; 41 bottom:0; 42 width: 30%; 43 height: 20%; 44 margin: auto; 45 } 46 47 48 </style> 49 50 51 </head> 52 <body> 53 <div class="boxDom"> 54 <div class="idDom"> 55 <div class="content"> 56 <p>弹幕内容</p> 57 <input type="text"> 58 <button>launch</button> 59 </div> 60 </div> 61 </div> 62 63 64 65 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 66 <script> 67 68 $(function () { 69 70 var colors = ["#000","#f00","#0f0","#00f","#f1f","#f10215","#f40","#ccc","#ff7"]; 71 72 $("button").click(function () { 73 var text = $("input[type="text"]").val(); 74 var Y = parseInt(Math.random() * ($(".boxDom").height() - $(".idDom").height())); 75 var selectedColor = colors[parseInt(Math.random() * colors.length)]; 76 77 //开始创建弹幕 78 $("<span></span>").text(text).css("color",selectedColor).css("left","-10px").css("top",Y).animate({left:$(window).width()},3000,"linear",function () { 79 $(this).remove(); 80 }).prependTo(".boxDom"); 81 82 $("input[type="text"]").val(""); 83 84 }); 85 86 87 $("input[type="text"]").keyup(function (e) { 88 if(e.keyCode==13){ 89 $("button").click(); 90 } 91 }); 92 93 94 }); 95 </script> 96 97 98 </body> 99 </html>