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
Der einfachste Weg, das MySQL-Root-Passwort zurückzusetzen
Meine MySQL-Version ist MySQL V5.7.9, bitte verwe...
So erstellen Sie eine my.ini-Datei im MySQL 5.7.19-Installationsverzeichnis
Im vorherigen Artikel habe ich das ausführliche T...
Mysql5.7 my.ini-Dateiladepfad und Datenspeicherortänderungsmethode unter Windows 7
Update: Jetzt können Sie auf die offizielle MySQL...
Detaillierte Erläuterung der MySQL-Benutzerrechteverwaltung
Inhaltsverzeichnis Vorwort: 1. Einführung in die ...
MySQL-Reihe von Erfahrungszusammenfassungen und Analyse-Tutorials zu NULL-Werten
Inhaltsverzeichnis 1. Testdaten 2. Die Unannehmli...
Docker verpackt das lokale Image und stellt es auf anderen Maschinen wieder her
1. Verwenden Sie Docker-Images, um alle Image-Dat...
Lernunterlagen zum Schreiben des ersten Vue-Programms
Inhaltsverzeichnis 1. Schreiben Sie ein HTML, das...
JavaScript zum Implementieren des Click-to-Switch-Bestätigungscodes und der Bestätigung
In diesem Artikel wird der spezifische JavaScript...
Detaillierter Vergleich von Ember.js und Vue.js
Inhaltsverzeichnis Überblick Warum ein Framework ...
Detaillierte Installationsanleitung für das Cloud-Server-Pagoda-Panel
Inhaltsverzeichnis 0x01. Installieren Sie das Pag...
JavaScript implementiert die zufällige Generierung von Bestätigungscode und Bestätigung
In diesem Artikel wird der spezifische Code von J...
Kreisförmiger Fortschrittsbalken mit CSS implementiert
Ergebnisse erzielen Implementierungscode html <...
So generieren Sie eine Vue-Benutzeroberfläche per Drag & Drop
Inhaltsverzeichnis Vorwort 1. Technisches Prinzip...
Ein seltener Fehler und eine Lösung für die vollständige SQL Server-Sicherung
1. Fehlerdetails Als ich einmal manuell eine voll...
MySQL implementiert eine Beispielmethode zum Anmelden ohne Kennwort
Spezifische Methode: Schritt 1: Stoppen Sie den M...