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
Häufig verwendete höherwertige Funktionen und umfassende Beispiele in Vue
1. Häufig verwendete höherwertige Funktionen von ...
CSS-Code-Abkürzung div+css-Layout-Code-Abkürzungsspezifikation
Durch die Verwendung von Abkürzungen können Sie di...
So setzen Sie das Zabbix-Passwort zurück (ein Schritt)
Problembeschreibung Da wir uns nicht lange bei Za...
Methode zur Erstellung von Vue-Scaffolding-Lernprojekten
1. Was ist Scaffolding? 1. Vue-CLI Vue CLI ist ei...
Lassen Sie die Webseite nach dem Öffnen für einige Sekunden auf andere Seiten umleiten
Fügen Sie einfach den folgenden Code hinzu, um die...
Erfahren Sie mehr über den Ereignisplaner EVENT in MySQL
Der Ereignisplaner in MySQL, EVENT, wird auch als...
So erstellen Sie eine lnmp-Umgebung im Docker
Erstellen eines Projektverzeichnisses mkdir php E...
js zur Realisierung von Login- und Registrierungsfunktionen
In diesem Artikelbeispiel wird der spezifische Co...
JavaScript-Methode zum Löschen oder Extrahieren bestimmter Zeichen aus einer Zeichenfolge (sehr häufig verwendet)
Inhaltsverzeichnis 1. Teilzeichenfolge () 2. subs...
js realisiert bidirektionale Datenbindung (Accessor-Überwachung)
In diesem Artikelbeispiel wird der spezifische Co...
Analyse zur Lösung des Problems, dass Navicat Premium eine Verbindung zu MySQL 8.0 herstellt und den Fehler „1251“ meldet.
Wenn Menschen zu lange untätig waren, denken sie,...
Natives JS zum Erzielen eines coolen Paging-Effekts
In diesem Artikel wird anhand eines Beispiels ein...
Detaillierte Erläuterung der sechs gängigen Einschränkungstypen in MySQL
Inhaltsverzeichnis Vorwort 1.nichtnull 2. einziga...
So verwenden Sie React zur Implementierung einer Bilderkennungs-App
Lassen Sie mich Ihnen zuerst das Effektbild zeige...
Vue implementiert Studentenverwaltungsfunktion
In diesem Artikelbeispiel wird der spezifische Co...