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
Das Erlebnis gestalten: Was auf dem Knopf liegt
<br />Vor Kurzem hat UCDChina eine Artikelse...
Tomcat meldet einen Fehler beim Starten des Springboot-Projekt-War-Pakets: Fehler beim Starten des untergeordneten
Heute ist das Springboot-Projekt des Unternehmens...
Eine kleine Sammlung von HTML-Meta-Tags
<Head>……</head> gibt den Dateikopf vo...
Zusammenfassung der Fallstricke beim Importieren von OVA-Dateien in VMware
Quelle des Problems Wie wir alle wissen, erzeugt ...
So berechnen Sie die Bildrate FPS von Webanimationen
Inhaltsverzeichnis Standards für flüssige Animati...
HTML+CSS+JavaScript, um eine Rubbellosversion für die Freundin zu erstellen (Sie werden es lernen, sobald Sie es sehen)
Ich glaube, jeder hat schon einmal Rubbellose ges...
Detaillierter Prozess der Installation verschiedener Software in Docker unter Windows
1. MySQL installieren # Laden Sie MySQL im Docker...
JS implementiert das Schere-Stein-Papier-Spiel
In diesem Artikelbeispiel wird der spezifische JS...
Lokale Vue-Komponentendatenfreigabe Vue.observable()-Nutzung
Wenn Komponenten detaillierter werden, treten Sit...
Analyse und Lösung des Problems, dass die MySQL-Instanz nicht gestartet werden kann
Inhaltsverzeichnis Vorwort Szenarioanalyse Zusamm...
So behandeln Sie den vom Linux-System gemeldeten Fehler tcp_mark_head_lost
Problembeschreibung Kürzlich meldete ein Host die...
Führen Sie die folgenden Schritte aus, um Vue-Router in Vue3 zu verwenden
Vorwort Die Verwaltung des Routings ist eine wese...
Detaillierte Beschreibung des komponentenbasierten Front-End-Entwicklungsprozesses
Hintergrund <br />Studenten, die am Front-En...
Probleme mit Vue, das die Homepage von Bibibili imitiert
Technische Struktur Das Projekt ist in zwei Teile...
So aktualisieren Sie alle Python-Bibliotheken in Ubuntu 18.04 auf einmal
Was ist Pip pip ist ein Python-Paketverwaltungsto...