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

Beim Hochladen von Bildern mit Axios in Vue sind Probleme aufgetreten

Inhaltsverzeichnis Was ist FormData? Eine praktis...

Lösung für das Textüberlaufproblem auf CSS-Flex-Basis

Die unbedeutende flex-basis hat bei der kleinen F...

So installieren Sie PostgreSQL und PostGIS mit yum auf CentOS7

1. Aktualisieren Sie die Yum-Quelle Die PostgreSQ...

Beispiel für das Hinzufügen von Attributen mithilfe von Stilen in HTML

Fügen Sie den erforderlichen Links Inline-Stile hi...

So können Sie lange Vue-Listen schnell laden

Inhaltsverzeichnis Hintergrund Hauptinhalt 1. Kom...

MYSQL Eine Frage zur Verwendung von Zeichenfunktionen zum Filtern von Daten

Problembeschreibung: Struktur: test hat zwei Feld...

Was Sie beim Schreiben selbstschließender XHTML-Tags beachten sollten

Das img-Tag in XHTML sollte wie folgt geschrieben...

Spezifische Verwendung des MySQL-Parameters binlog_ignore_db

Vorwort: Nach dem Studium des vorherigen Artikels...

Die 10 klassischen Optimierungsfälle und -szenarien von MySQL

Inhaltsverzeichnis 1. Allgemeine Schritte zur SQL...