Natives JS zum Erzielen eines Schiebeknopfeffekts
|
Der spezifische Code des mit Js erstellten Schiebeknopfs dient zu Ihrer Information. Der spezifische Inhalt ist wie folgt Fügen Sie zuerst das Effektbild ein
Fügen Sie den Quellcode erneut ein
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
</Kopf>
<Text>
<div style="position: relativ;breite:100vw;höhe:100vh">
<div id="Behälter">
<svg style="Breite:erben;Höhe:erben">
<Kreis id="c" cx="25" cy="25" r="23" Stil="Füllung:weiß; Strich:grau; Strichbreite:2;"
onmousedown="down(Ereignis)"
onmouseup="nach oben(Ereignis)"
onmouseleave="up(Ereignis)"
/>
</svg>
</div>
</div>
<!-- <Skript>
setzeTimeout(Funktion () {
let c = document.querySelector('Kreis');
Konsole.log(c.parentNode.parentNode.style)
},500)
</script> -->
<Stil>
Körper{
Rand: 0;
Hintergrundfarbe: Azurblau;
}
#Container{
Position: absolut;
links: 50 %; oben: 50 %;
transformieren: versetzeX(-50%) versetzeY(-50%);
Breite: 200px;
Höhe: 50px;
Hintergrundfarbe: schwarz;
Rahmenradius: 50px;
}
</Stil>
<Skript>
lass Kreis = document.getElementById('c'),
geklickt = falsch,
x = 0,y = 0;
circle.addEventListener("Mausbewegung",Funktion(e){
x = e.offsetX;
wenn(geklickt){
Kreis.setAttribute("cx",x)
}
})
Funktion t(e){
Kreis.setAttribute("cx",e.offsetX);
}
Funktion nach unten (e) {
geklickt = wahr;
}
Funktion nach oben () {
wenn(geklickt){
lass Flagge;
wenn(x <= 100)
neues Versprechen (Funktion (lösen, ablehnen) {
Flagge = Intervall setzen(Funktion(){
x -= 2;
Kreis.setAttribute("cx",x);
wenn(x <= 25){
Kreis.setAttribute("cx",25)
Kreis.setAttribute("Stil", "Füllung: weiß; Strich: grau; Strichbreite: 2;")
lösen("ok")
}
})
}).dann(res => {
Intervall löschen(Flag)
})
anders
neues Versprechen (Funktion (lösen, ablehnen) {
Flagge = Intervall setzen(Funktion(){
x += 2;
Kreis.setAttribute("cx",x);
wenn(x >= 175){
Kreis.setAttribute("cx",175);
Kreis.setAttribute("Stil", "Füllung: schwarz; Strich: grau; Strichbreite: 2;")
lösen("ok")
}
})
}).dann(res => {
Intervall löschen(Flag)
})
}
geklickt = falsch;
}
</Skript>
</body>
</html>Wissenspunkte, Produktionsideen und -schritte 1. Grundlegendes Layout ( übergeordnetes und untergeordnetes Element , links: 50 %; oben: 50 %; transform: translateX(-50 %) 2. Der Kreis (cx) von svg steuert die Bewegung, und der cx des Kreises wird durch setAtrribute gesteuert . 3. **Promise.then()** wird verwendet, um nach Abschluss ein ClearInterval sicherzustellen 4. circle hört auf die Ereignisse mousemove, mouseup und mousedown . Wenn das Mousedown-Ereignis ausgelöst wird, wird „cliked“ auf „true“ gesetzt und das Move-Ereignis wird zurückgesetzt. 5. Mouseup und Mouseleave setzen „cliked“ auf „false“, wodurch das Zurücksetzen (Stoppen) des Move-Ereignisses fehlschlägt. 6. Bestimmen Sie im angehaltenen Zustand, ob sich der Ursprung auf der linken oder rechten Seite befindet. Animation: Wenn er sich auf der linken Hälfte befindet, bewegen Sie sich mit setInterval jedes Mal 1,5 Pixel für 10 ms pro Frame und stoppen Sie, wenn der Start- oder Endpunkt erreicht ist. 7. Wechseln Sie dann den Stil. Alle Codes sind von mir, Sie können sie gerne kopieren. Die Codes wurden nicht sortiert und es können ungültige Variablen vorhanden sein. Sie stellen lediglich meine Ideen dar. 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 Erläuterung der Berechnungsmethode von Flex-Grow und Flex-Shrink im Flex-Layout
>>: Die Vorteile und Beispiele für die Platzierung der Sitemap am unteren Rand der Webseite
Artikel empfehlen
So fragen Sie die neueste Transaktions-ID in MySQL ab
Vorne geschrieben: Manchmal müssen Sie möglicherw...
Ein Problem mit der Bereitstellung von MySQL 5.5
MySQL-Bereitstellung Derzeit stellt das Unternehm...
Umfassendes Verständnis der Node-Ereignisschleife
Inhaltsverzeichnis Knoten-Ereignisschleife Ereign...
Implementierungsbeispiel eines Nginx+Tomcat-Load-Balancing-Clusters
Inhaltsverzeichnis Einführung 1. Fallübersicht 2....
Verstümmelte Zeichen und Lösungen im MySQL-Zeichensatz
Vorwort Ein Zeichensatz ist eine Reihe von Symbol...
So starten Sie ein Vue-Projekt mit dem M1 Pro-Chip
Inhaltsverzeichnis Einführung Homebrew installier...
mysql charset=utf8 verstehen Sie wirklich, was es bedeutet
1. Schauen wir uns zunächst eine Anweisung zur Ta...
CSS bewirkt, dass sich die Farbe der gesamten Linie ändert, wenn die Maus darauf platziert wird
Zusammenfassung: Im Folgenden finden Sie eine Met...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.27 winx64
In diesem Artikel wird die Installations- und Kon...
Mögliche Gründe, warum das Eingabetag type="reset" in HTML ungültig ist (nicht funktioniert).
Bei Verwendung des Tags <html:reset> stellen...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.11 Neue Kennwortauthentifizierungsmethode für MySQL 8.0
In diesem Artikel finden Sie das grafische Tutori...
Beispielcode für die Verwendung von HTML-Tags „ul“ und „li“ zur Anzeige von Bildern
Kopieren Sie den folgenden Code in den Codebereich...
Detaillierte Erklärung von count(), group by, order by in MySQL
Ich bin vor Kurzem auf ein Problem gestoßen, als ...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.15 (Windows)
Da ich MySQL installieren muss, zeichne ich den I...
Lösung für den Fehler beim Laden der dynamischen Bibliothek, wenn ein Linux-Programm ausgeführt wird
Dynamische Bibliothek kann unter Linux nicht gela...