jQuery erzielt Vollbild-Scrolling-Effekt
|
In diesem Artikelbeispiel wird der spezifische Code von jQuery zum Erzielen eines Vollbild-Scrollens zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Rendern
Ideen1. Um es im Vollbildmodus anzuzeigen, setzen Sie das übergeordnete Element, den Textkörper, das HTML, die Höhe auf 100 %, die Breite auf 100 % und legen Sie die Überlaufverbergung für HTML und Textkörper fest.
html,Text{
Höhe: 100 %;
/* Vollbild erreichen */
Überlauf: versteckt;
}
.wickeln{
Position: relativ;
oben: 0;
links: 0;
/* Vollbild erreichen */
Höhe: 100%;
}
div.wrap>div{
Breite: 100 %; Höhe: 100 %;
}2. Importieren Sie das Mausrad, nachdem Sie min.js importiert haben <script src="../../0817/jquery-3.5.1/jquery-3.5.1.min.js"></script> <script src="../../0817/jquery-3.5.1/jquery.mousewheel.min.js"></script> 3. e.deltaY>0 nach oben schieben e.deltaY<0 nach unten schieben 4. Kontrollieren Sie die Folie einmal
<Skript>
varflag = wahr;
wenn(Flagge){
//Nach oben schiebenif(e.deltaY>0){
Flagge = falsch;
}
//Nach unten rutschen, sonst{
Flagge = falsch;
}
</Skript>5. Um es gleiten zu lassen, muss das übergeordnete Element geändert werden (hier ist die Oberseite des Wraps, nicht die Oberseite des Dokuments. Ich hatte am Anfang eine falsche Vorstellung. Seine Höhe sollte die Höhe des untergeordneten Elements * -1 sein). Beachten Sie, dass Sie nach jedem Gleiten weiter gleiten können sollten, also sollten Sie flag = true in die Funktion schreiben. Um zu verhindern, dass es die Grenze überschreitet, schreiben Sie die Auf- und Ab-Gleiten in ein if. Siehe den Code unten.
<Skript>
// Einmaliges Gleiten steuern, wenn (Flagge) {
//Nach oben schiebenif(e.deltaY>0){
//Kann nicht nach oben rutschen if(i>0){
Konsole.log(i)
ich--;
Flagge = falsch;
$('.wrap').animate({top:-i*hei},1000,Funktion(){
Flagge=wahr;
})
}
}//Nach unten schieben, sonst{
// Dadurch wird ein Herunterrutschen verhindert if(i<4){
ich++;
Flagge = falsch;
$('.wrap').animate({top:-i*hei},1000,Funktion(){
Flagge=wahr;
})
}
}
}
</Skript>Vollständiger Code
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<Titel></Titel>
<Stil>
*{Rand:0;Padding:0;}
/* Vollbild erreichen */
html,Text{
Höhe: 100 %;
Überlauf: versteckt;
}
.wickeln{
Position: relativ;
oben: 0;
links: 0;
/* Vollbild erreichen */
Höhe: 100%;
}
div.wrap>div{
Breite: 100 %;
Höhe: 100 %;
}
div.eins{
Hintergrund: Hellkoralle;
}
div.zwei{
Hintergrund: hellblau;
}
div.drei{
Hintergrund: Hellseegrün;
}
div.vier{
Hintergrund: helles Schiefergrau;
}
div.fünf{
Hintergrund: rosa;
}
</Stil>
</Kopf>
<Text>
<div Klasse="wrap">
<div Klasse="eins"></div>
<div Klasse="zwei"></div>
<div Klasse="drei"></div>
<div Klasse="vier"></div>
<div Klasse="fünf"></div>
</div>
<script src="../../0817/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="../../0817/jquery-3.5.1/jquery.mousewheel.min.js"></script>
<Skript>
$(Funktion(){
varflag = wahr;
var i=0;
var hei=$('.wrap>div').first().height();
$(Dokument).Mausrad(Funktion(e){
// Einmaliges Gleiten steuern, wenn (Flagge) {
//Nach oben schiebenif(e.deltaY>0){
//Kann nicht nach oben rutschen if(i>0){
Konsole.log(i)
ich--;
Flagge = falsch;
$('.wrap').animate({top:-i*hei},1000,Funktion(){
Flagge=wahr;
})
}
}//Nach unten schieben, sonst{
// Dadurch wird ein Herunterrutschen verhindert if(i<4){
ich++;
Flagge = falsch;
$('.wrap').animate({top:-i*hei},1000,Funktion(){
Flagge=wahr;
})
}
}
}
})
})
</Skript>
</body>
</html>Zusammenfassen:1.Top zu erreichen 2. Denken Sie an den Überlauf 3. Die Oberseite des Schiebereglers ist immer noch eine negative Zahl, keine positive Zahl 4. Die Höhe und Breite sollten auf 100% eingestellt werden 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:
|
<<: Detaillierte Anweisungen zur Installation von MySQL8.0.19 im CentOS7.5-Tutorial
>>: Prinzipielle Beispiele für die vier Netzwerktypen von Docker
Artikel empfehlen
So verwenden Sie SVG-Symbole in WeChat-Applets
SVG wurde in den letzten Jahren aufgrund seiner v...
Detaillierte Erläuterung der grundlegenden Verwendung von MySql-Stored-Procedure-Parametern
Verwendung gespeicherter Prozeduren in Parametern...
Mounten Sie die Festplatte in einem Verzeichnis unter Ubuntu 18.04
Einführung In diesem Artikel wird beschrieben, wi...
So ändern Sie die Container-Portzuordnung in Docker dynamisch
Vorwort: Die Docker-Portzuordnung erfolgt häufig,...
Nutzungsszenarien und Quellcodeanalyse der Funktionskomponenten erweiterter Vue-Komponenten
Inhaltsverzeichnis einführen Anwendungsszenarien ...
Installieren Sie das komprimierte MySQL5.7-Paket schnell unter Windows
In diesem Artikel erfahren Sie, wie Sie das kompr...
Detaillierte Erklärung der Kommunikation zwischen hierarchisch verschachtelten Komponenten in der Vue-Frontend-Entwicklung
Inhaltsverzeichnis Vorwort Beispiel Zusammenfassu...
Tipps, wie Sie aus Pixeln umfassende Markenerlebnisse machen
Herausgeber: In diesem Artikel wird die Rolle erö...
Implementierung der Miniprogramm-Aufzeichnungsfunktion
Vorwort Bei der Entwicklung eines Miniprogramms b...
Detaillierte Erklärung der Lösung zum Vergessen des Passworts in MySQL 5.7
Umwelt: [root@centos7 ~]# uname -r 3.10.0-514.el7...
Detaillierte Erläuterung der benutzerdefinierten Anweisungen für die Vue.js-Direktive
Anpassen eines Demo-Befehls Die Syntax der benutz...
HTML-Formular_PowerNode Java Academy
1. Formular 1. Die Rolle des Formulars HTML-Formu...
So installieren Sie Nginx in CentOS
Offizielle Dokumentation: https://nginx.org/en/li...
Asynchrone Programmierung in Javascript: Verstehen Sie Promise wirklich?
Inhaltsverzeichnis Vorwort Grundlegende Verwendun...
Beispiel für die Konvertierung von Webpack-Bildern in Base64
URL-Loader herunterladen yarn add -D URL-Lader Mo...