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
Vorgänge der Kommunikation zwischen Docker-Containern und der externen Netzwerkkommunikation
Kommunikation zwischen Containern 1. Netzwerkfrei...
So verwenden Sie CSS, um mehrere Bilder horizontal in der Mitte anzuzeigen
Lassen Sie mich zunächst über die Implementierung...
Detaillierte Erläuterung der Galera-Cluster-Bereitstellung im Clustermodus von MySQL
Inhaltsverzeichnis 1: Einführung in Galera-Cluste...
Erhalten Sie schnell Datenbankverbindungsinformationen und einige Erweiterungen über Zabbix
Hintergrund Da die Anzahl der Anwendungssysteme w...
Warum sollte CSS im Head-Tag platziert werden?
Denken Sie darüber nach: Warum sollte css im head...
Ein praktischer Leitfaden zu den Komponenten zur Leistungsoptimierung beim ersten Bildschirm von Vue-Projekten
Inhaltsverzeichnis Komponente zur Leistungsoptimi...
Praktisches Tutorial zum Ändern des MySQL-Zeichensatzes
Vorwort: In MySQL unterstützt das System viele Ze...
Wenden Sie „Provide“ und „Inject“ an, um die Vue-Seitenmethode zu aktualisieren
Inhaltsverzeichnis Methode 1: Rufen Sie die Funkt...
Detaillierte Beispiele für Variablen- und Funktionspromotion in JavaScript
js-Ausführung Phase der lexikalischen Analyse: um...
MySQL-Datenmigration mit dem Befehl MySQLdump
Die Vorteile dieser Lösung liegen in der Einfachh...
So konfigurieren Sie SSH/SFTP und legen Berechtigungen unter dem Linux-Betriebssystem fest
Im Vergleich zu FTP bietet der SSH-basierte SFTP-...
Beispiel für utf8mb4-Sortierung in MySQL
Allgemeine utf8mb4-Sortierregeln in MySQL sind: u...
Vue implementiert den Lupeneffekt beim Tab-Umschalten
In diesem Artikelbeispiel wird der spezifische Co...
Zusammenfassung verschiedener Übermittlungsmethoden für HTML-Formulare
Die gebräuchlichste, am häufigsten verwendete und ...
Detaillierte Anweisungen zur Installation der MySQL5.7-Datenbank unter Centos7.2
Das MySQL auf dem Server ist in der Version 8.0.1...