jQuery zum Erreichen des Sperrfeuereffekts

In diesem Artikel wird der spezifische Code von jQuery zur Erzielung des Sperreffekts zu Ihrer Information veröffentlicht. Der spezifische Inhalt ist wie folgt

Wirkung:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <Titel>Tucao Danmaku</Titel>
    
    <script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
    <Stil>
            html, Text {
      Rand: 0px;
      Polsterung: 0px;
      Breite: 100 %;
      Höhe: 100%;
      Schriftfamilie: „Microsoft YaHei“;
      Schriftgröße: 62,5 %;
    }
    
    .boxDom {
      Breite: 100 %;
      Höhe: 100%;
      Position: relativ;
      Überlauf: versteckt;
    }
    
    .idDom {
      Breite: 100 %;
      Höhe: 100px;
      Hintergrund: #666;
      Position: fest;
      unten: 0px;
    }
    
    .Inhalt {
      Anzeige: Inline-Block;
      Breite: 430px;
      Höhe: 40px;
      Position: absolut;
      links: 0px;
      rechts: 0px;
      oben: 0px;
      unten: 0px;
      Rand: automatisch;
    }
    
    .Titel {
      Anzeige: inline;
      Schriftgröße: 4em;
      vertikale Ausrichtung: unten;
      Farbe: #fff;
    }
    
    .text {
      Rand: keiner;
      Breite: 300px;
      Höhe: 30px;
      Rahmenradius: 5px;
      Schriftgröße: 2,4em;
    }
    
    .btn {
      Breite: 60px;
      Höhe: 30px;
      Hintergrund: #f90000;
      Rand: keiner;
      Farbe: #fff;
      Schriftgröße: 2,4em;
    }
    
    Spanne {
      Breite: 300px;
      Höhe: 40px;
      Position: absolut;
      Überlauf: versteckt;
      Farbe: #000;
      Schriftgröße: 4em;
      Zeilenhöhe: 1,5em;
      Cursor: Zeiger;
      Leerzeichen: Nowrap;
    }
    </Stil> 
</Kopf> 
   
<Text>
    
<div Klasse="boxDom" id="boxDom">
  <div Klasse="idDom" id="idDom">
    <div Klasse="Inhalt">
      <p class="title">Kommentare:</p>
      <input Typ="Text" Klasse="Text" ID="Text"/>
      <button type="button" class="btn" id="btn">Starten</button>
    </div>
  </div>
</div>
 
<Skript>
   
  
  $(Funktion () {
    
      //Ereignisaufzählungsbildschirmschriftarten in verschiedenen Farben registrieren var colors = ["red", "green", "hotpink", "pink", "cyan", "yellowgreen", "purple", "deepskyblue"];
    $("#btn").klick(Funktion () {
      var randomColor = parseInt(Math.random() * Farben.Länge);
      var randomY = parseInt(Math.random() * 400);
      
      $("<span></span>")//Span erstellen
        .text($("#text").val())//Inhalt festlegen.css("color", colors[randomColor])//Schriftfarbe festlegen.css("left", "1400px")//Linken Wert festlegen.css("top", randomY)//Obenen Wert festlegen.animate({left: -500}, 10000, "linear", function () {
          //Wenn Sie den Endpunkt erreichen, müssen Sie $(this).remove(); löschen.
        })//Animation hinzufügen.appendTo("#boxDom");
      
      
      $("#text").val("");
    });
    
    
    $("#text").keyup(Funktion (e) {
      wenn (e.keyCode == 13) {
        $("#btn").klick();
      }
    });
    
  });
</Skript>
</body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

js realisiert den Effekt des Tanabata-Geständnisfeuers, jQuery realisiert die Feuerfeuertechnologie
jQuery zur Erzielung einer einfachen Sperrfeuerproduktion
jQuery implementiert Bullet-Screen-Effekte
jQuery zum Erzielen eines Live-Barrage-Effekts
jQuery implementiert einen einfachen Bullet-Screen-Effekt
Einfache Implementierung des jQuery-Bullet-Screen-Effekts
Implementierung der Danmu-App basierend auf jQuery
Realisierung des Barrage-Effekts basierend auf jQuery
Eine weitere wunderbare jQuery-Implementierung für den Bullet-Screen-Effekt
Endlich realisiert! Wunderbarer jQuery-Barrage-Effekt

<<: Problem mit fehlgeschlagener tzselect-Einstellungszeit in Ubuntu20, Raspberry Pi-Server (empfohlen)

>>: mysql charset=utf8 verstehen Sie wirklich, was es bedeutet