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
Erste Schritte Tutorial für Neulinge ⑤: Die Registrierung auf der Website ist sehr einfach, Tipps zur schnellen Registrierung
Freunde, die Speicherplatz gekauft und Websites er...
So richten Sie die Verwendung der chinesischen Eingabemethode in Ubuntu 18.04 ein
In der neuesten Version von Ubuntu müssen Benutze...
So überwachen Sie MySQL mit Zabbix
Dokumentation zur Zabbix-Bereitstellung Nach der ...
Tutorial zur Master-Slave-Konfiguration der MySQL-Datenbank unter Windows
Der detaillierte Prozess zum Konfigurieren des My...
Lösen Sie das Problem, dass die virtuelle CentOS7-Maschine nicht auf das Internet zugreifen kann, und richten Sie die virtuelle CentOS7-Maschine so ein, dass sie für den Zugriff auf das Internet eine statische IP verwendet
Ich habe vor Kurzem in einer virtuellen VMware-Ma...
Eine kurze Einführung in das bionische Design im Internet-Webdesign
Beim Stichwort Bionik-Design denken viele an die E...
Lösung für die Nichterreichbarkeit des Tencent Cloud Server Tomcat-Ports
Ich habe vor Kurzem einen Server mit Tencent Clou...
Mehrere Möglichkeiten, Python-Programme im Linux-Hintergrund auszuführen
1. Die erste Methode besteht darin, den Befehl un...
Analyse, wie eine gespeicherte Prozedur in MySQL erstellt wird, um einer Datentabelle neue Felder hinzuzufügen
Dieser Artikel beschreibt anhand eines Beispiels,...
Detaillierte Erklärung zur Verwendung mehrerer Timer in CocosCreator
1. setTimeOut Drucken Sie abc nach 3 Sekunden. Nu...
Javascript-Bereich und Abschlussdetails
Inhaltsverzeichnis 1. Geltungsbereich 2. Geltungs...
Referenz zur MySQL-Optimierungslösung
Probleme, die bei der Optimierung auftreten könne...
Ideen und Codes zur Implementierung des Wasserfall-Flow-Layouts im UniApp-Applet
1. Einleitung Gilt es als Aufwärmen alter Themen,...
JavaScript, um die Idee des Schlangenspiels umzusetzen
Die Implementierungsidee des Javascript-Spiels Sn...
Mysql-Methode zum Kopieren einer Datenspalte einer Tabelle in eine Spalte einer anderen Tabelle
mysql kopiert eine Tabellenspalte in eine andere ...