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 Designprozess des Logos zum Mittherbstfest von Alibaba in Kombination mit der Website
<br />Denken Sie zuerst an die Idee, zeichne...
Webentwicklungs-Tutorial: domänenübergreifende Lösung – detaillierte Erläuterung
Vorwort Dieser Artikel stellt hauptsächlich die d...
js-Methode zur Realisierung der Warenkorbberechnung
In diesem Artikelbeispiel wird der spezifische Co...
Wie implementiert MySQL ACID-Transaktionen?
Vorwort Kürzlich wurde ich in einem Interview gef...
Mehrere Möglichkeiten zum Übergeben von Daten von übergeordneten Komponenten an untergeordnete Komponenten in Vue
Ich habe kürzlich den Quellcode von Vue studiert ...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.14 (allgemein)
MySQL-Dienst 8.0.14-Installation (allgemein), zu ...
Was sind die Dateiattribute von crw, brw, lrw usw. in Linux?
Was ist eine Datei? Eigentlich sind alle Dateien ...
Keine chinesische Spezialität: Webentwicklung unter kulturellen Unterschieden
Webdesign und -entwicklung sind harte Arbeit, als...
XHTML-Tutorial: XHTML-Grundlagen für Anfänger
<br />Der Inhalt dieser Site ist Original. B...
So konfigurieren Sie die MySQL Master-Slave-Replikation unter Windows
Die MySQL Master-Slave-Replikation ermöglicht die...
Eine detaillierte Zusammenfassung der Regeln zur Verschachtelung von HTML-Tags, geeignet für Anfänger
Ich habe vor kurzem HTML neu gelernt, was als neue...
Detailliertes Tutorial-Diagramm zur Installation der dekomprimierten Version von MySQL5.7.21
Da ich das System häufig installiere, muss ich na...
Lösung für das Problem, dass die InnoDB-Engine beim Starten von MySQL deaktiviert wird
Finden Sie das Problem Als ich heute bei der Arbe...
Detaillierte Erklärung des Lebenszyklus von Angular-Komponenten (Teil 2)
Inhaltsverzeichnis 1. Haken anzeigen 1. Was bei d...