jQuery Realisierung von Bullet Screen Effekt

Das Ergebnis sieht so aus:

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">-8">
 <title></title>
 <style>
 *{
 margin:0;
 padding:0;
 }
 #wrap{
 width:800px;
 height:550px;
 background:#E9E8E8;
 margin:0 auto;
 position:relative;
 }
 #content{
 width:750px;
 height:400px;
 background:#fff;
 margin:0 auto;
 border-radius: 15px;
 position:relative;
 overflow:hidden;
 }
 input:nth-of-type(1){
 width:250px;
 height:30px;
 margin:20px 0 0 200px;  
 }
 input:nth-of-type(2){
 width:60px;
 height:33px;  
 }
 .p{
 height:30px;
 line-height:30px;
 position:absolute;
 top:0;
 left:770px;
 font-weight:900;
 font-size: 30px;
 }
 </style>
 </head>
 <body>
 <div id="wrap">
 <div id="content">
 </div>
 <input type="text" id="txt" placeholder="Come and vent together~"/>
 <input type="button" value="Send" id="btn" />
 </div>
 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
 <script>
 $(function(){
 $("#btn").click(function(){
  var $value=$("#txt").val();
  var $p=$("<p></p>");
  $p.addClass("p");
  $p.text($value);
  $("#txt").val("");//Nach dem Klicken wird der Inhalt des Textfelds auf leer gesetzt
  var _top=Math.floor(Math.random()*($("#content").innerHeight()-30));
  var _fontsize=16+Math.floor(Math.random()*10);
  var _rgb="rgb(" + Math.floor(Math.random()*255)+", + Math.floor(Math.random()*255)+", + Math.floor(Math.random()*255)+")"; 
  $p.css({"top":_top,"font-size":_fontsize,"color":_rgb});
  $("#content").append($p);
  var _timer=Math.ceil(Math.random()*4000)+3000;
  $p.stop().animate({"left":"-500px"},_timer,function(){
  $(this).remove();
  }); 
 });
 });
 </script>
 </body>
</html>

Das ist der gesamte Inhalt dieses Artikels. Wir hoffen, dass der Inhalt Ihnen bei Ihrem Lernen oder Ihrer Arbeit hilft und wir hoffen auch, dass Sie die Anleitung von Rufen weiter unterstützen!

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrechtlichem Eigentümer. Der Inhalt wurde von Internetbenutzern selbstständig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht von Hand bearbeitet. Diese Website übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie verdächtige urheberrechtliche Inhalte finden, freuen wir uns über die Übermittlung einer E-Mail an: notice#oldtoolbag.com (Bitte ersetzen Sie # durch @ beim Senden von E-Mails zur Meldung von Verstößen und bieten Sie relevante Beweise an. Sobald nachgewiesen, wird diese Website die verdächtigen Inhalte sofort löschen.)

Grundlegende Anleitung

Elasticsearch-Anleitung