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
Warum MySQL-Datenbanken NULL so weit wie möglich vermeiden
Viele Tabellen in MySQL enthalten Spalten, die NU...
Zusammenfassung der Web-Frontend-Kenntnisse (persönliche praktische Erfahrung)
1. Als ich heute eine Seite erstellte, stieß ich a...
Einführung in die Unterschiede zwischen HTML-Name, ID, Klasse (Format/Anwendungsszenario/Funktionen) usw.
Auf einer Seite gibt es viele Steuerelemente (Elem...
JS-Code zum Erzielen eines Seitenwechseleffekts
In diesem Artikelbeispiel wird der spezifische Co...
Zusammenfassung zum Hinzufügen von Root-Berechtigungen für Benutzer in Linux
1. Fügen Sie einen Benutzer hinzu . Verwenden Sie...
Detaillierte Erklärung und Zusammenfassung der Verwendung des Crontab-Befehls für geplante Linux-Aufgaben
Der Befehl crontab wird von Unix und Linux verwen...
Gemeinsame Überprüfung beider Vue-Felder zur Realisierung der Kennwortänderungsfunktion
Inhaltsverzeichnis 1. Einleitung 2. Implementieru...
Verwenden Sie SWFObject, um das Browserkompatibilitätsproblem beim Einfügen von Flash in HTML perfekt zu lösen
Lasst uns gemeinsam lernen 1. Traditionelle Metho...
Einführung in die SSL- und WSS-Schritte für die Nginx-Konfiguration
Inhaltsverzeichnis Vorwort 1. Nginx-Installation ...
Möglicherweise benötigen Sie einen digitalen Großbild-Scrolling-Effekt wie diesen
Der digitale Scrolleffekt auf großen Bildschirmen...
Deaktivieren der AutoVervollständigen-Funktion im Eingabefeld
Jetzt können wir ein Eingabeattribut namens „Autov...
So optimieren Sie eine Website, um die Zugriffsgeschwindigkeit zu erhöhen Update
Vor Kurzem hat das Unternehmen damit begonnen, al...
Eingabedatei zur benutzerdefinierten Schaltflächenverschönerung (Demo)
Ich habe schon einmal einen solchen Artikel gesch...
So stellen Sie über Navicat eine Remoteverbindung zu MySQL her
Wenn Sie Navicat direkt für die Verbindung über I...
Was sind die neuen Funktionen von Apache Spark 2.4, das 2018 veröffentlicht wird?
Dieser Artikel stammt vom Apache Spark Meetup, da...