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:
|
<<: So konfigurieren Sie Java-Umgebungsvariablen im Linux-System
>>: Zusammenfassung gängiger Optimierungsvorgänge der MySQL-Datenbank (Erfahrungsaustausch)
Sie können das Attribut in HTML5 verwenden <inp...
Dynamisches Implementieren eines einfachen sekund...
1. Dauerhafte Änderung, gültig für alle Benutzer ...
Lernziele: Die beiden Funktionen parseInt() und N...
Der Nginx 502 Bad Gateway-Fehler ist mir schon me...
Die Größe des Textbereich-Tags ist unveränderlich ...
1. Fazit Syntax: Limit-Offset, Zeilen Schlussfolg...
Tatsächlich haben viele Unternehmen ähnliche Funk...
In diesem Artikelbeispiel wird der Anwendungscode...
MongoDB-Installationsprozess und Problemaufzeichn...
Die virtuelle Maschine wird verwendet oder es kan...
1. Nginx-Statusüberwachung Nginx bietet eine inte...
Im Projekt stoßen wir häufig auf das Problem, gro...
Ⅰ. Problembeschreibung: Verwenden Sie CSS, um kon...
Wenn ein Unternehmen eine automatisierte Docker-B...