jQuery erzielt den Effekt einer Werbung, die nach oben und unten gescrollt wird

jQuery erzielt den Effekt einer Werbung, die nach oben und unten gescrollt wird

In diesem Artikel wird der spezifische Code von jQuery beschrieben, um den Effekt des Hoch- und Runterscrollens von Anzeigen zu Ihrer Information zu erzielen. Der spezifische Inhalt ist wie folgt

1. Mit jQuery im Termindatensatz nach oben und unten scrollen

jQuery-Anzeigen scrollen nach oben und unten, fügen Sie einfach den Code ein

Der Code lautet wie folgt (Beispiel):

CSS:

<Stil>

 /* -------------------------Terminaufzeichnungen---------------------------------- */
 .Top_Record{}
 .topRec_List dl, .maquee {Breite: 90 %; Überlauf: ausgeblendet; Rand: 0 automatisch; Farbe: #7C7C7C}
 .maquee{ Höhe:265px;}
 .topRec_List ul{ Breite:100%; Höhe:195px;}
 .topRec_List li{ Höhe:35px;Schriftgröße:14px;Breite: 100% }
 /*.topRec_List li:nth-child(2n){ Hintergrund:#077cd0}*/
 .topRec_List li div{ float:left;}
 .topRec_List li div:nth-child(1){ width:35%;}
 .topRec_List li div:nth-child(2){ width:35%;}
 .topRec_List li div:nth-child(3){ width:20%;}
 .maquee ul li{float: left}
 .aktiv{
 Farbe: #FC6A13;
 }
</Stil>

HTML:

<div style="Hintergrund: #ffffff;Breite: 100%;Rand oben: 5pt;Polsterung unten: 10pt;Polsterung oben: 5pt">
 <div class="titled"><p class="person">235 Personen haben sich das Haus angesehen</p><p class="titleds">Terminaufzeichnungen</p></div>
 <br>
 <div Klasse="Top_Record">
 <div Klasse="topRec_List">
 <dl>
{{-- <dd> </dd>--}}
 </dl>
 <div Klasse="maquee">
 <ul>
 <li><div>Vor 1 Jahr</div><div>131****121</div><div>vor 10 Minuten</div></li>
 <li><div>Vor 2 Jahren</div><div>131****121</div><div>vor 10 Minuten</div></li>
 <li><div>Vor 3 Jahren</div><div>131****121</div><div>vor 10 Minuten</div></li>
 </ul>
 </div>
 </div>
 </div>
</div>

JS:

<Skripttyp="text/javascript">

 const index = ($(".maquee").height() / $(".maquee ul li").height());
 Funktion autoScroll(Objekt){
 $(obj).find("ul").animieren({
 oberer Rand: "-35px"
 },1000,Funktion(){
 $(diese).css({marginTop : "0px"}).find("li:first").appendTo(diese);
 })
 $(".maquee ul li").removeClass('aktiv');
 $(".maquee ul li").eq(parseInt(index)+1).addClass('aktiv')
 }
 $(Funktion(){
 var scroll=setInterval('autoScroll(".maquee")',1500);
 });


 $(".maquee ul li").eq(parseInt(index)+1).addClass('aktiv')

</Skript>

2. Wirkung

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:
  • jQuery implementiert den detaillierten Code des nach oben und unten scrollenden Bulletin Boards
  • Nachrichten nach oben und unten scrollen jQuery super einfach (unbedingt lesen)
  • So erzielen Sie mit jQuery einen Text-Scrolling-Effekt
  • JQuery-Plug-In für dynamisches Umschalten beim digitalen Auf- und Ab-Scrollen
  • jQuery-Code, der mit der Maus nach oben und unten scrollt
  • jQuery-Beispielcode zum Erzielen eines Auf- und Ab-Scrolleffekts
  • So implementieren Sie das Scrollen von Text nach oben und unten in JQuery
  • Ein kleines Beispiel für Klicken und Scrollen nach oben und unten, geschrieben in JQuery
  • jQuery-Anzeigen mit nach oben und unten scrollen

<<:  So konfigurieren Sie Java-Umgebungsvariablen im Linux-System

>>:  Zusammenfassung gängiger Optimierungsvorgänge der MySQL-Datenbank (Erfahrungsaustausch)

Artikel empfehlen

CSS zum Erstellen eines dynamischen sekundären Menüs

Dynamisches Implementieren eines einfachen sekund...

Fallstudie zum Unterschied zwischen JavaScript parseInt() und Number()

Lernziele: Die beiden Funktionen parseInt() und N...

Ursachen und Lösungen für den Nginx 502 Bad Gateway-Fehler

Der Nginx 502 Bad Gateway-Fehler ist mir schon me...

MySQL-Limit-Leistungsanalyse und -Optimierung

1. Fazit Syntax: Limit-Offset, Zeilen Schlussfolg...

jQuery Treeview-Baumstrukturanwendung

In diesem Artikelbeispiel wird der Anwendungscode...

Linux-Installation, MongoDB-Start und Lösung allgemeiner Probleme

MongoDB-Installationsprozess und Problemaufzeichn...

Probleme und Lösungen bei der Installation und Verwendung von VMware

Die virtuelle Maschine wird verwendet oder es kan...

Detaillierte Erläuterung der Nginx-Statusüberwachung und Protokollanalyse

1. Nginx-Statusüberwachung Nginx bietet eine inte...

Analyse der Probleme und Lösungen beim Importieren großer Datenmengen in MySQL

Im Projekt stoßen wir häufig auf das Problem, gro...

nginx generiert automatisch Konfigurationsdateien im Docker-Container

Wenn ein Unternehmen eine automatisierte Docker-B...