JS realisiert den Scroll-Effekt von Online-Ankündigungen

In diesem Artikel wird der spezifische JS-Code zur Erzielung des Scroll-Effekts der Online-Ankündigung zu Ihrer Information veröffentlicht. Der spezifische Inhalt ist wie folgt

Der erzielte Effekt ist folgender: Die Nachrichtenmeldung scrollt auf und ab.

Code:

<!DOCTYPE html>
<html lang="de">

<Kopf>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
 <meta http-equiv="X-UA-kompatibel" content="ie=edge">
 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>
 <script src="./l-by-l.min.js"></script>
 <title>Dokument</title>
 <Stil>
  * {
   Polsterung: 0;
   Rand: 0;
   Box-Größe: Rahmenbox;
  }

  .Benachrichtigung-Neuigkeiten {
   Breite: 400px;
   Höhe: 30px;
   Hintergrundfarbe: #fff;
   Rand: 1px durchgezogen #ccc;
   Rand: 20px;
   Rahmenradius: 8px;
   Anzeige: Flex;
   Elemente ausrichten: zentrieren;
   Polsterung: 0 10px;
   Überlauf: versteckt;

  }

  .hron-Stimme {
   Breite: 16px;
   Höhe: 16px;
   Hintergrundbild: URL('./horn.png');
   Hintergrundwiederholung: keine Wiederholung;
   Hintergrundgröße: 100 % 100 %;
  }

  .Nachrichtenliste {
   Listenstil: keiner;
   Breite: 320px;
   Höhe: 18px;
   Schriftgröße: 12px;
   Rand links: 10px;
   Überlauf: versteckt;
   /* Übergang: alle 0,5 s linear; */
  }

  .news-list li {
   Breite: 100 %;
   Überlauf: versteckt;
   Leerzeichen: Nowrap;
   Textüberlauf: Auslassungspunkte;
  }

  
 </Stil>
</Kopf>

<Text>
 <div Klasse="Benachrichtigung-Neuigkeiten">
  <div Klasse="hron-voice"></div>
  <ul Klasse="Nachrichtenliste">
   <li>HTML steht für Hypertext Markup Language und ist eine Identifikationssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. </li>
   <li>JavaScript (kurz „JS“) ist eine leichtgewichtige, interpretierte oder Just-in-Time-kompilierte, hochrangige Programmiersprache mit einem „Function-First“-Ansatz. </li>
   <li>Cascading Style Sheets (vollständiger Name: Cascading Style Sheets) ist eine Computersprache, die verwendet wird, um den Stil von Dateien wie HTML (eine Anwendung der Standard Generalized Markup Language) oder XML (eine Teilmenge der Standard Generalized Markup Language) auszudrücken. </li>
   <li>Node.js ist eine JavaScript-Laufzeitumgebung, die auf der Chrome V8-Engine basiert. Node.js verwendet ein ereignisgesteuertes, nicht blockierendes E/A-Modell. </li>
  </ul>
 </div>
</body>

<Skripttyp="text/javascript">
 $(Funktion () {
  setzeIntervall(Funktion () {
   $('.news-list').animieren({
    oberer Rand: '-50px'
   }, 2000, Funktion () {
    $(diese).css({ marginTop: "0px" });
    var li = $(".news-list").children().first().clone()
    $(".news-list li:last").nach(li);
    $(".news-list li:first").entfernen();
   })
  }, 3000)
 })
</Skript>

</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:

JavaScript, um den Effekt des Auf- und Abscrollens im Bulletin Board zu erzielen
Mit JavaScript implementierte Scroll-Ankündigungseffekte [basierend auf jQuery]
Natives js, um einen Ankündigungs-Scroll-Effekt zu erzielen
Verwenden Sie 10 Zeilen JS-Code, um den Effekt des Hoch- und Runterscrollens von Ankündigungen zu erzielen
js nahtloses Scrollen nach oben, Website-Ankündigungseffekt spezifischer Code

<<: Vuex implementiert einen einfachen Einkaufswagen

>>: JavaScript-HTML zur Implementierung der mobilen Red Envelope Rain-Funktionsseite