jQuery自制弹幕效果
Posted programfield
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery自制弹幕效果相关的知识，希望对你有一定的参考价值。
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>
以上是关于jQuery自制弹幕效果的主要内容，如果未能解决你的问题，请参考以下文章