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
Teilen Sie die 15 besten HTML/CSS-Design- und Entwicklungsframeworks
Professionelles Webdesign ist komplex und zeitint...
Details zur geplanten Datenbanksicherung und Datenwiederherstellung bei Navicat für MySQL
Das Ändern oder Löschen einer Datenbank kann zu D...
Implementierung der Nginx-Lastverteilung/SSL-Konfiguration
Was ist Lastenausgleich? Wenn ein Domänenname auf...
Zusammenfassung der Erfahrungen beim Website-Erstellen
<br />Welche Grundsätze sollten beachtet wer...
Oberflächliches Webdesign
<br />Ich war schon immer der Meinung, dass ...
MySQL-Datenbank Daten laden, vielfältige Verwendungsmöglichkeiten
Inhaltsverzeichnis Vielfältige Einsatzmöglichkeit...
Detaillierte Erläuterung des Prozesses zum Erstellen eines MQTT-Servers mit Docker
1. Ziehen Sie das Bild Docker-Pull-Registrierung....
Eine kurze Erläuterung des Sperrbereichs der MySQL-Next-Key-Sperre
Vorwort Eines Tages wurde ich plötzlich nach der ...
Erstellen eines statischen Jenkins Docker-Agentknotens
Ein statischer Knoten ist auf einer Maschine fixi...
Tutorial-Diagramm zur Konfiguration der Tomcat-Umgebungsvariablen unter Win10
Vor der Konfiguration müssen wir Folgendes tun: 1...
Eine kurze Diskussion über den Aufbau und den Betriebsmechanismus des Echtzeit-Computerframeworks Flink Cluster
Inhaltsverzeichnis 1. Flink-Übersicht 1.1 Grundle...
5 Möglichkeiten zum Löschen oder Entfernen großer Dateiinhalte in Linux
Beim Arbeiten mit Dateien im Linux-Terminal möcht...
Ein auf Vue-cli basierender Codesatz unterstützt mehrere Projekte
Inhaltsverzeichnis Anwendungsszenario Ideen Proje...
WeChat Mini-Programm QR-Code-Generierungstool weapp-qrcode Detaillierte Erklärung
WeChat Mini-Programm - QR-Code-Generator Download...
Ausführliches Tutorial zur Installation und Konfiguration von MySQL 8.0.20
In diesem Artikel finden Sie eine ausführliche An...