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

Implementierungsmethode für die Datenspeicherung im WeChat-Applet

Inhaltsverzeichnis Globale Variable „globalData“ ...

Zusammenfassung der verschiedenen Haltungen der MySQL-Berechtigungseskalation

Inhaltsverzeichnis 1. Schreiben Sie Webshell in d...

So löschen Sie Tabellendaten in MySQL

Es gibt zwei Möglichkeiten, Daten in MySQL zu lös...

Installations- und Konfigurationstutorial von MySQL 8.0.16 unter Win10

1. Entpacken Sie MySQL 8.0.16 Der Ordner dada und...

Einführung in die Verwendung des Base-Link-Tags Base

<br />Wenn Sie auf den Link klicken, wird di...

Die beste Erklärung zu HTTPS

Guten Morgen allerseits, ich habe meinen Artikel ...

Drei Möglichkeiten zum Zeichnen einer Herzform mit CSS

Im Folgenden stellen wir drei Möglichkeiten zum Z...

Installationsprozess von VMware vCenter 6.7 (grafisches Tutorial)

Hintergrund Ursprünglich wollte ich ein 6.7 Vcent...

Detaillierte Erklärung der grundlegenden Verwendung des Linux-Debuggers GDB

Inhaltsverzeichnis 1. Übersicht 2. GDB-Debugging ...