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
Allgemeine Parameter für Popup-Fenster von IE-Webseiten können Sie selbst festlegen
Das Popup hat nichts damit zu tun, ob Ihr aktuelle...
Vue3 Vue-Ereignisbehandlungshandbuch
Inhaltsverzeichnis 1. Grundlegende Ereignisbehand...
Detaillierte Schritte zur schnellen Installation von Openshift
Der schnellste Weg, die neueste Version von OpenS...
Detaillierte Erläuterung zweier Möglichkeiten der Linux-Dienstverwaltung: service und systemctl
1.Service-Befehl Der Servicebefehl geht tatsächli...
Einführung des Code-Prüftools stylelint zum Erfahrungsaustausch
Inhaltsverzeichnis Vorwort Text 1. Installieren S...
So gehen Sie nach der MySQL-Tabellenpartitionierung problemlos online
Inhaltsverzeichnis Zweck der Tabelle Zum Beispiel...
Vergleich von mydumper und mysqldump in MySQL
Wenn Sie nur ein paar Tabellen oder eine einzelne...
Problem mit Zeitzonenfehler im Docker-Container
Inhaltsverzeichnis Hintergrund Frage Problemanaly...
jQuery implementiert das Ausblenden und Anzeigen von HTML-Elementen
Lassen Sie uns die Funktion von Taobao nachahmen,...
JS realisiert die automatische Wiedergabe der Timeline
Vor kurzem habe ich einen solchen Effekt implemen...
InnoDB-Typ MySql stellt Tabellenstruktur und Daten wieder her
Voraussetzung: Speichern Sie die .frm- und .ibd-D...
Das WeChat-Applet realisiert ein Verknüpfungsmenü
Um das Kursdesign zu realisieren, habe ich kürzli...
Detaillierte Erläuterung verschiedener Speichermethoden von Docker-Containern
Inhaltsverzeichnis Vorne geschrieben Mehrere Spei...
CSS Zurück zum Anfang Codebeispiel
Die meisten Websites haben heutzutage lange Seite...
Aktivierungsmethode für Windows Service 2016 Datacenter\Stand\Embedded (2021)
Führen Sie cmd mit Administratorrechten aus slmgr...