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>

 

相关文章