JavaScript zum Erzielen von Spezialeffekten beim Treppenrollen (jQuery-Implementierung)
|
Ich glaube, jeder hat JD verwendet. Auf der Homepage gibt es ein sehr häufiges Feature: den Treppen-Spezialeffekt . Für uns Programmierer: Alles kann auf Disk gespeichert werden. Schauen wir es uns also einmal an. Schauen wir uns zunächst das zu erzielende Wirkungsdiagramm an:
Beschreibung der Effektfunktion: Wenn Sie auf die schwebende Schaltfläche rechts klicken, klicken Sie auf das entsprechende Modul und der Inhaltsbereich links springt automatisch zum Modulbereich. Unten der Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
*{
Rand: 0;
Polsterung: 0;
}
li{
Listenstiltyp: keiner;
}
.Spitze{
Höhe: 900px;
Hintergrund: #ddd;
}
.Fußzeile{
Höhe: 600px;
Hintergrund: #ddd;
}
.Inhalt{
Höhe: 800px;
}
.Inhalt h1{
Textausrichtung: zentriert;
Zeilenhöhe: 80px;
}
.Treppenliste{
Breite: 60px;
Position: fest;
rechts: 5 %;
oben: 50 %;
Rand oben: -120px;
Hintergrund: #fff;
}
.stairs-list li{
Breite: 50px;
Höhe: 50px;
Zeilenhöhe: 25px;
Textausrichtung: zentriert;
Polsterung: 5px;
Rahmen unten: 1px durchgezogen #ddd;
}
.stairs-list li.active{
Farbe: orangerot;
}
.treppe li span {
Anzeige: Block;
}
</Stil>
</Kopf>
<Text>
<div Klasse="oben">
</div>
<div Klasse="Inhalt" Stil="Hintergrundfarbe: gelbgrün">
<h1>Jingdong-Schnellverkauf</h1>
</div>
<div Klasse="Inhalt" Stil="Hintergrundfarbe: Himmelblau">
<h1>Ausgewählte Auswahl</h1>
</div>
<div Klasse="Inhalt" Stil="Hintergrundfarbe: #666">
<h1>Kanal Plaza</h1>
</div>
<div Klasse="Inhalt" Stil="Hintergrundfarbe: orangerot">
<h1>Für Sie empfohlen</h1>
</div>
<div Klasse="Fußzeile"></div>
<ul Klasse="Treppenliste">
<li>
<span>JD.com</span>
<span>Zweiter Kill</span>
</li>
<li>
Merkmale
<span>Bevorzugt</span>
</li>
<li>
<span>Kanal</span>
<span>Quadrat</span>
</li>
<li>
<span>Für Sie</span>
<span>Empfehlungen</span>
</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<Skript>
// OOA:
// 1. Daten initialisieren;
// 2. Ereignisbindung;
// 3. Bestimmen Sie den Boden basierend auf dem ScrollTop-Wert.
// 4. Effekt hinzufügen;
// 5. Index entsprechend dem Klickereignis wechseln;
Funktion Treppe(Optionen){
this.options = Optionen;
dies.init();
}
Treppen.Prototyp = {
Konstrukteur: Treppen,
init: Funktion(){
// Inhaltselementhöhe Array;
dies.content_ele_offset_top_list = [];
// Die Offsethöhe des Elements abrufen;
$(this.options.content_selector).offset( Funktion( Index , Koordinaten) {
// Trage den Höhenwert jedes Elements in die Höhenliste ein;
this.content_ele_offset_top_list.push(Koordinaten.oben);
Rückgabekoordinaten;
}.binden(dies))
// Den Mindesthöhenwert abrufen;
var _length = this.content_ele_offset_top_list.length;
dies.min_top = dies.content_ele_offset_top_list[0];
this.max_top = this.content_ele_offset_top_list[_length - 1] + $(this.options.content_selector).last().height();
dies.content_ele_offset_top_list.push(dieses.max_top);
this.bindEvent();
},
bindEvent:Funktion(){
var $body_html = $("body,html");
//Speichere den Zeiger des Instanzobjekts;
// var _this = dies;
var Instanz = diese;
// Hochfrequente Scroll-Ereignisse;
// Optimierung: Drosselung;
$(Dokument).scroll( Funktion(){
var scrollTop = $body_html.scrollTop();
this.calStairsIndex(scrollTop);
}.binden(dies))
$(this.options.stairs_selector).klick(function(){
// Wissen, bei welchem Element das Ereignis gerade auftritt; dies; Da dieser jQuery-Ereignisbindungsprozess keine Möglichkeit hat, das Element, bei dem das Ereignis gerade auftritt, extern zu übergeben; dies kann nicht geändert werden;
//Wer ist das aktuelle Instanzobjekt; dies;
var index = $(this).index(instance.options.stairs_selector);
Instanz.changeScrollTop(index);
})
},
// Aktuelle Etage berechnen;
calStairsIndex : Funktion( st ){
// Treppenhausbereich zur Absperrung nicht erreicht;
wenn(st < dies.min_top || st > dies.max_top){
// konsole.log(-1);
dieser.index = -1;
dies.changeStairsBtn();
return false
};
// Wenn es noch im Bereich liegt, ist keine weitere Beurteilung erforderlich.
var _list = diese.content_ele_offset_top_list;
// Wenn „st“ noch innerhalb des aktuellen Indexbereichs liegt, nicht weiter suchen;
wenn(st >= _list[this.index] && st < _list[this.index + 1]){
gibt false zurück;
}
// Durchqueren;
für(var i = 0 ; i < _list.length ; i++){
wenn(st >= _list[i] && st < _list[i + 1]){
dies.index = i;
brechen;
}
}
dies.changeStairsBtn();
},
ändereStairsBtn : Funktion(){
wenn(dieser.index === -1){
$(this.options.stairs_selector).removeClass("aktiv");
gibt false zurück;
}
$(this.options.stairs_selector).eq(this.index).addClass("aktiv")
.geschwister()
.removeClass("aktiv");
},
changeScrollTop : Funktion( Index ){
$("body,html").scrollTop(diese.content_ele_offset_top_list[index]);
// Ereignisauslöser;
$(document).trigger("scrollen");
}
}
var staris = neue Treppe({
Inhaltsselektor: ".Inhalt",
Treppenselektor: ".stairs-list li"
});
Konsole.log(staris);
</Skript>
</body>
</html>Jetzt können wir denselben funktionalen Effekt erzielen. 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:
|
<<: Sechs Möglichkeiten, die Größe von Docker-Images zu reduzieren
>>: Detaillierte Erklärung zum Schreiben von MySQL ungleich null und gleich null
Artikel empfehlen
Detaillierte Erläuterung der zu beachtenden Punkte bei HTML-Standards, die den W3C-Standards entsprechen
XML/HTML-CodeInhalt in die Zwischenablage kopiere...
Mehrere gängige Methoden für CSS-Layouts mit gleicher Höhe
Gleichhohes Layout Bezieht sich auf das Layout vo...
Detaillierte Erläuterung der Keep-Alive- und Unified-Routing-Verarbeitung von Vue3-Cache-Seiten
Inhaltsverzeichnis 1. Einleitung 2. Verwendung 1....
So laden Sie Flash in HTML (2 Implementierungsmethoden)
Erste Methode : CSS Code: Code kopieren Der Code l...
Zabbix überwacht den Prozess der Linux-Systemdienste
Zabbix erkennt automatisch Regeln zur Überwachung...
Einführung in die Verwendung des HTML-Elements Noscript
Noscript-Definition und -Verwendung Das Noscript-...
Detaillierte Erklärung einer Methode zum Umbenennen von Prozeduren in MySQL
Kürzlich habe ich die Funktion zum Umbenennen ges...
Verwenden Sie Nexus als private Bibliothek, um Docker zum Hoch- und Herunterladen von Bildern zu proxyen
1. Nexus-Konfiguration 1. Erstellen Sie einen Doc...
Einige Vorschläge zur Linux-Systemoptimierung (Kerneloptimierung)
Swap deaktivieren Wenn auf dem Server ein Datenba...
Nexus nutzt API für den Betrieb
Nexus bietet RestApi, aber einige APIs müssen noc...
jQuery-Plugin zum Erzielen eines Code-Rain-Effekts
In diesem Artikel wird der spezifische Code des j...
Beispielcode zur Implementierung des Schaltflächeneffekts „Wassertropfen-Wellenanimation“ mit CSS+JS
Der Code sieht folgendermaßen aus: <!DOCTYPE h...
Detaillierte Erläuterung der Vorgänge zum Hinzufügen, Löschen und Ändern der MySQL-Datenbank
Einfügen von Daten in Tabellennamen (Spaltenname ...
So zeigen Sie die Zeitzone in MySQL an und ändern sie
Heute habe ich festgestellt, dass ein Programm ei...
MySQL-Datenbankindizes und -Transaktionen
Inhaltsverzeichnis 1. Inhaltsverzeichnis 1.1 Konz...