jQuery zum Erzielen eines gleitenden Treppeneffekts
|
In diesem Artikel wird der spezifische Code von jQuery zur Erzielung des gleitenden Treppeneffekts zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Idee : Wenn die Maus scrollt, ändert sich die Seite entsprechend, und wenn auf das Modul geklickt wird, wird der Effekt erzielt, auf die richtige Stelle zu zeigen Code-Implementierung1.html- und CSS-Code
<html>
<Kopf>
<meta charset="UTF-8">
<Titel></Titel>
<style type="text/css">
Körper,ul,li{
Polsterung: 0;
Rand: 0;
}
li{
Listenstil: keiner;
}
#floorNav{
Anzeige: keine;
Position: fest;
oben: 100px;
links: 50px;
Breite: 32px;
Rand: 1px durchgezogen #CECECE;
}
#floorNav li{
Position: relativ;
Breite: 32px;
Höhe: 32px;
Rahmen unten: 1px durchgezogen #CECECE;
Textausrichtung: zentriert;
Zeilenhöhe: 32px;
Schriftgröße: 12px;
}
#floorNav span{
Anzeige: keine;
Position: absolut;
oben: 0;
links: 0;
Breite: 32px;
Höhe: 32px;
Hintergrund: rot;
Farbe: weiß;
}
#floorNav li:hover span,#floorNav li.hover span{
Anzeige: Block;
}
#floorNav li:last-child{
Hintergrund: rot;
Farbe: weiß;
Rahmen unten: keiner;
}
#Kopfzeile,#Fußzeile{
Breite: 1000px;
Höhe: 1000px;
Hintergrund: dunkelgoldrute;
Rand: 0 automatisch;
}
#Inhalt{
}
#Inhalt li{
Breite: 1000px;
Höhe: 600px;
Rand: 0 automatisch;
Schriftgröße: 40px;
Textausrichtung: zentriert;
Zeilenhöhe: 600px;
}
</Stil>
</Kopf>
<Text>
<div id="floorNav">
<ul>
<li>1F<span>Kleidung</span></li>
<li>2F<span>Schönheit</span></li>
<li>3F<span>Mobiltelefon</span></li>
<li>4F<span>Haushaltsgeräte</span></li>
<li>5F<span>Digital</span></li>
<li>6F<span>Sport</span></li>
<li>7F<span>Privat</span></li>
<li>8F<span>Mutter und Baby</span></li>
<li>9F<span>Essen</span></li>
<li>10F<span>Bücher</span></li>
<li>11F<span>Dienst</span></li>
<li>Nach oben</li>
</ul>
</div>
<div id="header"></div>
<div id="Inhalt">
<ul>
<li style="background: #8B0000;">Kleidung</li>
<li style="background: #123;">Make-up</li>
<li style="background: #667;">Mobiltelefon</li>
<li style="background: #558;">Haushaltsgeräte</li>
<li style="background: #900;">Digital</li>
<li style="background: #456;">Sport</li>
<li style="background: #789;">Startseite</li>
<li style="background: #234;">Mutter und Baby</li>
<li style="background: #567;">Essen</li>
<li style="background: #887;">Bücher</li>
<li style="background: #980;">Dienstleistungen</li>
</ul>
</div>
<div id="Fußzeile"></div>
</body>2. Importieren Sie als Nächstes eine jQuery-Datei und schreiben Sie den jQuery-Code
<Skript>
$(Funktion(){
//Definiere das Urteil var flag = true
$(Fenster).scroll(Funktion(){
wenn(Flagge){
//Versteckte Treppe anzeigen var scrollTop=$(this).scrollTop();
wenn(scrollTop>=500){
$("#floorNav").fadeIn()
} anders{
$("#floorNav").fadeOut();
}
//Zeigen Sie auf die Stelle, an der Sie treffen möchten$("#content li").each(function(){
wenn(scrollTop>=$(this).offset().top-$(this).outerHeight()/2){
var index = $(dieser).index();
$("#floorNav li").eq(index).addClass("hover")
.geschwister().removeClass("schweben")
}
})
}
})
//Beim Klicken scrollt die Scrollleiste an die entsprechende Position$("#floorNav li:not(:last)").click(function(){
Flagge=false
var index = $(dieser).index();
$("html ,body").animate({"scrollTop":$("#content li").eq(index).offset().top},500)
Flagge = wahr
$(diese).addClass("hover").geschwister().removeClass("hover")
})
$("#floorNav li:last").klick(function(){
Flagge = falsch;
$("html,body").animieren({"scrollTop":0},200,function(){
Flagge = wahr
})
})
})
</Skript>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:
|
<<: Detailliertes Tutorial zum Bereitstellen eines Hadoop-Clusters mit Docker
>>: Zusammenfassung gängiger MySQL-DDL-Operationen
Artikel empfehlen
Lösung für den internen Serverfehler Nginx 500
Als ich heute Nginx verwendete, trat ein 500-Fehl...
Verwenden Sie das Firebug-Tool, um die Seite auf dem iPad zu debuggen
Wie debuggt man eine Seite auf dem iPad? Wenn Sie ...
Schritte zum Reparieren einer Beschädigung der Datei grub.cfg im Linux-System
Inhaltsverzeichnis 1. Einführung in die grub.cfg-...
So starten Sie ein JAR-Paket und führen es unter Linux im Hintergrund aus
Der Linux-Befehl zum Ausführen des JAR-Pakets lau...
MySQL umgeht die Gewährung von information_schema-Objekten und meldet den Fehler ERROR 1044 (4200)
Diese Frage ist eine Diskussion unter Internetnut...
Beispielcode zum Ausblenden von Element-Bildlaufleisten mithilfe von CSS
Wie kann ich die Bildlaufleisten ausblenden und t...
Einführung in die Verwendung sowie Vor- und Nachteile von MySQL-Triggern
Inhaltsverzeichnis Vorwort 1. Trigger-Übersicht 2...
Bringen Sie Ihnen bei, wie Sie elegant eine vertikale Zentrierung erreichen (empfohlen)
Vorwort Es gibt viele Möglichkeiten, in CSS horiz...
Zusammenfassung der verschiedenen Haltungen der MySQL-Berechtigungseskalation
Inhaltsverzeichnis 1. Schreiben Sie Webshell in d...
Detaillierte Diskussion der Speicherprinzipien: Werden Variablen in JS im Heap oder Stack gespeichert?
Inhaltsverzeichnis 1. Der Elefant, der nicht in d...
Verschiedene Probleme, auf die Anfänger bei der Installation von MySQL in Docker stoßen
Vorwort In letzter Zeit dauert das Herunterfahren...
Der MySQL-Server wird mit der Option --skip-grant-tables ausgeführt.
Der MySQL-Server läuft mit der Option --skip-gran...
Beispielcode zur Implementierung einer Pivot-Tabelle in MySQL/MariaDB
Im vorherigen Artikel wurden mehrere Methoden zur...
So ändern Sie das MySQL-Datenbankdateiverzeichnis in Ubuntu
Vorwort Der Ubuntu-Server des Unternehmens platzi...
Verwenden Sie Vue, um die Funktion für handschriftliche Signaturen zu implementieren
Persönliche Implementierungs-Screenshots: Install...