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
Lösung für Primärschlüsselkonflikte, wenn innodb_index_stats beim Importieren von Sicherungsdaten einen Fehler meldet
Fehlerbeschreibung percona5.6, mysqldump vollstän...
Windows CVE-2019-0708: Problem bei der Reproduktion der Sicherheitslücke bei der Codeausführung auf Remotedesktop
1. Beschreibung der Schwachstelle Am 15. Mai 2019...
Die umfassendsten 50 Mysql-Datenbankabfrageübungen
Diese Datenbankabfrageanweisung ist eine von 50 D...
Mysql NULL verursachte die Grube
Verwenden von NULL in Vergleichsoperatoren mysql&...
80 Zeilen Code zum Schreiben eines Webpack-Plugins und Veröffentlichen auf npm
1. Einleitung Ich habe vor Kurzem die Prinzipien ...
Einführung in das Fokuselement document.activeELEment in JavaScript
Inhaltsverzeichnis 1. Der Fokus liegt standardmäß...
Das Laufschriftelement implementiert Effekte wie scrollende Schriften und Bilder
Mit dem Laufschriftelement können Sie einfache Gle...
So verwenden Sie Nginx, um domänenübergreifende Front-End-Probleme zu lösen
Vorwort Bei der Entwicklung statischer Seiten, wi...
So führen Sie ein Projekt mit Docker aus
1. Geben Sie das Verzeichnis ein, in dem Ihr Proj...
Tab-Effekte mit JS schreiben
In diesem Artikelbeispiel wird der spezifische Co...
Die Lösung für das Problem, dass die Webtabelle oder die Div-Ebene in der Webseite gestreckt ist
<br />Beim Gestalten von Webseiten stoßen wi...
Was tun, wenn Sie Ihr Linux/Mac MySQL-Passwort vergessen?
Was tun, wenn Sie Ihr Linux/Mac MySQL-Passwort ve...
Linux Cron geplante Ausführung von PHP-Code mit Parametern
1. Verwenden Sie zur Ausführung weiterhin ein PHP...
Dieser Artikel zeigt Ihnen, wie die Speicherbereinigung in JavaScript funktioniert
Inhaltsverzeichnis 1. Übersicht 2. Speicherverwal...
MySQL 5.7 MySQL-Befehlszeilenclient - Befehlsdetails
MySQL 5.7 MySQL-Befehlszeilenclient mit Befehlen ...