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
Bei der Installation einer virtuellen Maschine auf Thinkpad VMware erscheint die Meldung „Dieser Host unterstützt Intel VT-x, aber Intel VT-x ist deaktiviert“ (Problemlösung)
Als ich heute VMware verwendete, um eine neue vir...
Detaillierte Erläuterung der zugrunde liegenden Implementierungsmethode des Nginx-Polling-Algorithmus
Einführung in den Polling-Algorithmus Viele Leute...
jQuery realisiert die volle Funktion des Einkaufswagens
In diesem Artikel wird der spezifische Code von j...
Erklärung zur Verwendung von JavaScript ECharts
Ich habe ECharts schon einmal bei einem Projekt v...
Bedingte Kommentare im Internet Explorer für XHTML
<br />Bedingte Kommentare sind eine einzigar...
JavaScript implementiert Produktdetails der E-Commerce-Plattform
In diesem Artikel wird ein allgemeines Beispiel f...
In Linux gibt es keinen Make-Befehl (make: *** Kein Ziel angegeben und keine Makefile- oder Make-Befehlsinstallationsmethode gefunden)
Beachten! ! ! Diese Situation kann bei der Instal...
So konfigurieren Sie Eureka im Docker
Heureka: 1. Erstellen Sie ein JDK-Image Starten S...
Zusammenfassung zur Verwendung der Bootstrap-Tabelle
In diesem Artikel erfahren Sie, wie Sie die Boots...
Detaillierte Erläuterung des vollständigen Anwendungsbeispiels zur Entwicklung von Hyperf unter Docker
Offizielle Hyperf-Website Hyperf offizielle Dokum...
Gründe und Lösungen für das fehlgeschlagene Einfügen von Emoji-Ausdrücken in MySQL
Fehlerszenario Beim Aufrufen von JDBC zum Einfüge...
Eine kurze Diskussion darüber, ob CSS das Rendern von Seiten blockiert
Vielleicht weiß jeder, dass die JS-Ausführung die...
CSS-Beispielcode zur Implementierung von Schiebetüren
Durch die sogenannte Sliding Door-Technologie läs...
Die Vorteile und Beispiele für die Platzierung der Sitemap am unteren Rand der Webseite
Früher hatte fast jede Website eine Sitemap-Seite...
Docker-Compose-Installationsmethode für die YML-Dateikonfiguration
Inhaltsverzeichnis 1. Offline-Installation 2. Onl...