js, um einen Boden-Scrolling-Effekt zu erzielen
|
In diesem Artikel wird jQuery verwendet, um den Effekt einer gleitenden Treppe zu implementieren, durch die Stockwerke zu scrollen und auf die Stockwerkschaltfläche zu klicken, um zum entsprechenden Stockwerk zu springen. Der Code lautet wie folgt HTML Quelltext:
<div style="height: 500px; background-color: black; color: #fff;">Bedeutungsloser Text</div>
<div Klasse="Layerbox">
<div class="layer num1">Ebene 1</div>
<div class="layer num2">Ebene 2</div>
<div class="layer num3">Die dritte Schicht</div>
<div class="layer num4">Schicht 4</div>
</div>
<div Klasse="nav">
<ul>
<li>1F</li>
<li>2F</li>
<li>3F</li>
<li>4F</li>
</ul>
</div>
CSS Code:
* {
Rand: 0;
Polsterung: 0;
}
.Schicht {
Höhe: 300px;
Schriftgröße: 80px;
Farbe: weiß;
Textausrichtung: zentriert;
}
.num1 {
Hintergrundfarbe: rot;
}
.num2 {
Hintergrundfarbe: blau;
}
.num3 {
Hintergrundfarbe: gelb;
}
.num4 {
Hintergrundfarbe: grün;
}
.nav {
Position: fest;
rechts: 50px;
unten: 400px;
Hintergrundfarbe: rosa;
}
ul {
Listenstil: keiner;
}
ul li {
Polsterung: 10px;
Breite: 50px;
Höhe: 50px;
Zeilenhöhe: 50px;
Textausrichtung: zentriert;
Rand: 1px durchgezogen #000;
}
ul li.aktiv {
Hintergrundfarbe: Purpurrot;
}js-Code:
<Skript>
var Ebenen = document.querySelectorAll(".layer")
var lis = document.querySelectorAll('li')
für (lass i = 0; i < lis.length; i++) {
Konstante li = lis[i]
li.onclick = Funktion (e) {
//Der Seitenversatz, die ursprüngliche Seiten-Scrolldistanz var scrollTop = document.documentElement.scrollTop
var offsetTop = Ebenen[i].offsetTop
wenn (scrollTop > offsetTop) {
// Bildlaufleiste bewegt sich nach oben var timer = setInterval(function () {
wenn (scrollTop > offsetTop) {
scrollTop -= 40
wenn (scrollTop - offsetTop < 40) {
// Wenn der Abstand zum letzten Loch weniger als 40 beträgt, setze den Offset direkt auf 0
window.scrollTo(0, OffsetTop)
} anders {
Fenster.scrollTo(0, scrollTop)
}
} anders {
Intervall löschen(Timer)
}
}, 50)
} anders {
// Bildlaufleiste bewegt sich nach unten // scrollTop <= offsetTop
var Timer = Intervall festlegen(Funktion () {
wenn (scrollTop < offsetTop) {
scrollTop += 40
wenn (offsetTop - scrollTop < 40) {
window.scrollTo(0, OffsetTop)
} anders {
Fenster.scrollTo(0, scrollTop)
}
} anders {
Intervall löschen(Timer)
}
}, 50);
}
}
}
fenster.onscroll = Funktion (e) {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
Schichten.fürJedes(Funktion (v, i) {
wenn (v.ClientHöhe + v.OffsetTop > ScrollTop && ScrollTop > v.OffsetTop) {
// Der gescrollte Boden erreicht den oberen Bereich und verschwindet lis[i].classList.add("active")
} anders {
lis[i].classList.remove("aktiv")
}
})
}
</Skript>Der Editor wird Ihnen einen weiteren Codeabschnitt mitteilen: jQuery Floor Scrolling Special Effects
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>jq Boden-Scrolling-Effekt</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
ich {
Schriftstil: normal;
}
ul,
li,
dl,
ol{
Listenstil: keiner;
}
#LoutiNav {
Rand: 1px durchgehend grau;
Breite: 30px;
Position: fest;
oben: 150px;
links: 50px;
Anzeige: keine;
}
#LoutiNav li {
Breite: 30px;
Höhe: 30px;
Rahmen unten: 1px durchgehend grau;
Zeilenhöhe: 30px;
Textausrichtung: zentriert;
Cursor: Zeiger;
}
#LoutiNav Spanne {
Anzeige: keine;
}
#LoutiNav .aktiv {
Hintergrund: weiß;
Farbe: dunkelrot;
}
#LoutiNav li:hover span {
Anzeige: Block;
Schriftgröße: 12px;
Hintergrund: dunkelrot;
Farbe: weiß;
}
#LoutiNav li:hover i {
Anzeige: keine;
}
#nachOben {
Breite: 40px;
Höhe: 40px;
Zeilenhöhe: 40px;
Textausrichtung: zentriert;
Hintergrund: grau;
Position: fest;
unten: 30px;
rechts: 30px;
Cursor: Zeiger;
Rahmenradius: 5px;
Anzeige: keine;
}
#goTop:hover {
Hintergrund: dunkelrot;
Farbe: weiß;
}
#goTop:hover span {
Anzeige: Block;
}
#erweima
Breite: 130px;
Höhe: 130px;
Hintergrund: blassgrün;
Anzeige: keine;
Position: absolut;
rechts: 46px;
unten: 5px;
Zeilenhöhe: 130px;
Textausrichtung: zentriert;
Schriftgröße: 20px;
Rahmenradius: 10px;
}
#Kopfzeile {
Höhe: 200px;
Hintergrund: blasses Goldrutenrot;
Textausrichtung: zentriert;
Zeilenhöhe: 200px;
Schriftgröße: 72px;
Rand: 0 automatisch;
}
.louceng {
Höhe: 810px;
Textausrichtung: zentriert;
Zeilenhöhe: 610px;
Schriftgröße: 120px;
Rand: 0 automatisch;
}
</Stil>
<script src="js/jquery-1.7.2.min.js"></script>
</Kopf>
<Text>
<ul id="LoutiNav">
<li class="active"><i>1F</i><span>Kleidung</span></li>
<li><i>2F</i><span>Schönheit</span></li>
<li><i>3F</i><span>Mobiltelefon</span></li>
<li style="border-bottom: none;"><i>4F</i><span>Haushaltsgeräte</span></li>
</ul>
<div id="goTop">
<span id="erweima">Ich bin ein QR-Code</span> Top
</div>
<div id="header">Kopfzeile</div>
<div id="Haupt">
<div class="louceng" style="background: papayawhip;">Kleidung</div>
<div class="louceng" style="background: peachpuff;">Schönheit</div>
<div class="louceng" style="background: peru;">Mobiltelefon</div>
<div class="louceng" style="background: pink;">Haushaltsgeräte</div>
</div>
<Skript>
var oNav = $('#LoutiNav'); //Navigations-Shell var aNav = oNav.find('li'); //Navigation var aDiv = $('#main .louceng'); //Boden var oTop = $('#goTop'); //Zurück zum Anfang $(window).scroll(function() {
//Sichtbare Fensterhöhe var winH = $(window).height();
//Maus-Scrolldistanz var iTop = $(window).scrollTop();
wenn(iTop >= $("#header").height()) {
oNav.fadeIn();
oTop.fadeIn();
//Ändert den Gleitstil der Maus aDiv.each(function() {
wenn(winH + iTop - $(this).offset().top > winH / 2) {
aNav.removeClass('aktiv');
aNav.eq($(this).index()).addClass('aktiv');
}
})
} anders {
oNav.fadeOut();
oTop.fadeOut();
}
})
//Klicken, um zur aktuellen Etage zurückzukehren aNav.click(function() {
var t = aDiv.eq($(this).index()).offset().top;
$('body,html').animieren({
"scrollTop": t
}, 500);
$(this).addClass('aktiv').siblings().removeClass('aktiv');
});
//Zurück zum Anfang oTop.click(function() {
$('body,html').animieren({
"scrollTop": 0
}, 500)
})
</Skript>
</body>
</html>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:
|
<<: Docker erstellt Python Flask+ Nginx+Uwsgi-Container
>>: js, um einen einfachen Drag-Effekt zu erzielen
Artikel empfehlen
So implementieren Sie eine Multi-Terminal-Bridging-Plattform basierend auf WebSocket in JS
Inhaltsverzeichnis 1. Was zu debuggen ist 2. Funk...
So rufen Sie ein Verzeichnis/einen Ordner in Linux auf, ohne den CD-Befehl zu verwenden
Wie wir alle wissen, können wir in Linux ohne den...
So richten Sie den Start einer JAR-Anwendung unter CentOS7 ein
Fallstricke bei der Projektimplementierung Beim B...
Detaillierte Erläuterung der Nginx Rewrite-Nutzungsszenarien und Codebeispiele
Nginx Rewrite-Nutzungsszenarien 1. Sprung der URL...
Detaillierte Erklärung häufig verwendeter CSS-Stile (Layout)
Kompatibel mit neuen CSS3-Eigenschaften In CSS3 k...
So lösen Sie das Problem der Nichtübereinstimmung des MySQL-Abfragezeichensatzes
Finden Sie das Problem Ich bin vor kurzem bei der...
So installieren Sie Jupyter in Docker auf CentOS und öffnen Ports
Inhaltsverzeichnis Installieren Sie Jupyter Docke...
So verwenden Sie Tinymce in Vue3.0+ und implementieren die Funktion zum Hochladen mehrerer Bilder und zum Bearbeiten der Formel zum Hochladen von Dateien
Zugehörige Dokumente Ein Teil dieses Artikels wir...
Grafisches Tutorial zur Installation von Ubuntu 18.04 auf einer virtuellen VMware 15-Maschine
In den letzten Jahren habe ich zwischen Automatis...
Beispielcode für Box-Shadow und Drop-Shadow zum Erreichen einer unregelmäßigen Projektion
Wenn wir einem Rechteck oder einer anderen Form, ...
Zusammenfassung der Ausnahmen bei der MySQL-Datenbankverbindung (sammelwürdig)
Beim Bereitstellen des Projekts auf Centos ist mi...
Detaillierte Erläuterung der Vue-Projektoptimierung und -verpackung
Inhaltsverzeichnis Vorwort 1. Lazy Loading-Routin...
Erläuterung des Problems bei der Auswahl des MySQL-Speicherzeittyps
Der datetime-Typ wird normalerweise zum Speichern...
Analyse und Lösung eines Fehlalarmproblems bei der langsamen MySQL-Protokollüberwachung
Früher wurden manche Alarme aus verschiedenen Grü...
So erstellen Sie eine TAR-Datei von WSL über Docker
Ich habe kürzlich mit der Remote-Entwicklungsfunk...