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)
Inhaltsverzeichnis Was ist FormData? Eine praktis...
Die unbedeutende flex-basis hat bei der kleinen F...
Vorbereitung 1. Starten Sie die virtuelle Maschin...
1. Aktualisieren Sie die Yum-Quelle Die PostgreSQ...
Vorwort Um eine Tabelle zu löschen, kann der Befe...
Fügen Sie den erforderlichen Links Inline-Stile hi...
Inhaltsverzeichnis Hintergrund Hauptinhalt 1. Kom...
Problembeschreibung: Struktur: test hat zwei Feld...
Inhaltsverzeichnis TOKEN Timer-Aktualisierung 2. ...
Das img-Tag in XHTML sollte wie folgt geschrieben...
Verwenden Sie CSS, um zu verhindern, dass Lightbo...
Dieser Artikel beschreibt die gemeinsame Abfrageo...
Vorwort: Nach dem Studium des vorherigen Artikels...
Wie lässt sich bei einem unbekannten Server oder ...
Inhaltsverzeichnis 1. Allgemeine Schritte zur SQL...