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
CSS-Eingabe[Typ=Datei]-Stilverschönerung (Eingabe-Upload-Dateistil)
Wirkung: <!doctype html> <html> <K...
18 allgemeine Befehle in der MySQL-Befehlszeile
Bei der täglichen Wartung und Verwaltung von Webs...
Eine kurze Einführung in die einfache Verwendung der CentOS7-Firewall und offener Ports
Übersicht (offiziell gibt es eine ausführlichere ...
Analyse der Implementierungsmethode der Koexistenz von Nginx und Apache unter Linux-Servern
Dieser Artikel beschreibt, wie die Koexistenz von...
Tiefgreifendes Verständnis der dynamischen und asynchronen Komponenten von Vue
1. Dynamische Komponenten <!DOCTYPE html> &...
Detaillierte Erläuterung der drei Möglichkeiten zum Konfigurieren virtueller Nginx-Hosts (basierend auf Ports)
Nginx unterstützt drei Möglichkeiten zum Konfigur...
Docker-Netzwerkmodus und Konfigurationsmethode
1. Docker-Netzwerkmodus Wenn Docker Run einen Doc...
Vue setzt die Daten auf ihren ursprünglichen Zustand zurück
In einigen Fällen müssen die Daten in den Daten w...
JS-Version des Bildlupeneffekts
In diesem Artikel wird der spezifische JS-Code zu...
Schritte zur Verwendung von autoconf zum Generieren von Makefile und Kompilieren des Projekts
Vorwort Unter Linux ist zum Kompilieren und Verkn...
So installieren Sie den RabbitMQ-Server mit Yum auf CentOS
Socat muss vor der Installation von rabbitmq inst...
Drei Vererbungsmethoden in JavaScript
erben 1. Was ist Vererbung? Vererbung: Zunächst e...
Detaillierte Erläuterung der Deep Copy und Shallow Copy im JS-Variablenspeicher
Inhaltsverzeichnis Variabler Typ und Speicherplat...
So laden Sie die Kamera in HTML
Wirkungsdiagramm: Gesamtwirkung: Video wird gelad...
Im A-Tag befinden sich Text und Bilder. Wie kann ich den Text ausblenden und nur das Bild anzeigen?
Oftmals werden Sie auf einen <a>-Tag-Stil s...