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
Über 40 schöne Beispiele für Webformular-Designs
Webformulare sind der primäre Kommunikationskanal...
Wie lädt Vue Dateien mit unterschiedlichem Ursprung basierend auf der URL herunter?
Im Allgemeinen können wir beim Herunterladen von ...
Vue implementiert einen dynamischen kreisförmigen prozentualen Fortschrittsbalken
Als ich kürzlich ein kleines Programm entwickelte...
So legen Sie die Speichergröße von Docker Tomcat fest
Wenn Sie Tomcat in Docker installieren, kann es b...
Detaillierte Erläuterung der Angular-Routing-Grundlagen
Inhaltsverzeichnis 1. Routing-bezogene Objekte 2....
Vue3 basierend auf der Skript-Setup-Syntax $refs-Verwendung
Inhaltsverzeichnis 1. Vue2-Syntax 2. Nutzung von ...
Lösen Sie das Problem der Containerverwaltung mit Docker Compose
Im Docker-Design führt ein Container nur eine Anw...
Verwenden Sie Docker, um Tomcat bereitzustellen und eine Verbindung zu Skywalking herzustellen
Inhaltsverzeichnis 1. Übersicht 2. Verwenden Sie ...
Lösung für Ubuntu 18.04, das keine Verbindung zum Netzwerk in der virtuellen VMware-Maschine herstellen kann
Die Lösung für das Problem, dass Ubuntu 18.04 in ...
Der Nginx-Reverseproxy leitet Anfragen von Port 80 an 8080 weiter.
Lassen Sie uns zunächst eine Reihe von Konzepten ...
So konvertieren Sie eine Zeichenfolge in JavaScript in eine Zahl
Inhaltsverzeichnis 1.parseInt(Zeichenfolge, Basis...
Schritte zur Erstellung einer React Fiber-Struktur
Inhaltsverzeichnis React-Fasererstellung 1. Bevor...
Zusammenfassung von drei Möglichkeiten zum Implementieren von Rankings in MySQL ohne Verwendung von „order by“
Übernahme des Geschäfts: Sehen Sie sich die Gehal...
Installieren und konfigurieren Sie MySQL 5.7 unter CentOS 7
Dieser Artikel testet die Umgebung: CentOS 7 64-B...
Detaillierter Prozess zur Verwendung von Nginx zum Erstellen eines WebDAV-Dateiservers in Ubuntu
Installieren Sie nginx Beachten Sie, dass Sie ngi...