JavaScript zum Erzielen eines Mauszieheffekts
|
In diesem Artikel wird der spezifische JavaScript-Code zum Erzielen des Mauszieheffekts zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Das Effektbild ist diesmal wie folgt:
Ich denke, die Schwierigkeit bei diesem Experiment besteht darin, die relative Position der Box und der Maus unverändert zu lassen und durch Drücken und Bewegen der Maus den Zieheffekt zu erzielen. Wie erreicht man den Drag-Effekt? Wir müssen drei Funktionen verwenden: In der Rückruffunktion des Mausklicks müssen wir die Anfangsposition der Maus über In der Callback-Funktion für die Mausbewegung müssen wir die aktuelle Position des Felds basierend auf der Mausposition und der zuvor berechneten Differenz ermitteln und dann die linken und oberen Werte ändern. Vergessen Sie nicht, die Position auf absolut zu setzen (weil ich es vergessen habe ...) In der Rückruffunktion von „Maus hoch“ müssen wir die Mausbewegung und das Hochfahren der Maus löschen, indem wir Achtung! ! ! Die Mausbewegungsfunktion und die Maushebefunktion sollten in die Mausdrückfunktion geschrieben werden, da wir das nachfolgende Verhalten nach dem Drücken der Maus entwerfen möchten und Folgendes sehr wichtig ist: Die Funktion „Maus nach unten“ gehört dem Div, die Funktion „Maus bewegen“ und „Maus nach oben“ gehört dem Dokument. Denn wir wollen nicht die Maus im div bewegen, sondern die ganze Seite Die wichtigsten Punkte sind wahrscheinlich diese. Hier ist der Code:
<!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>
<Stil>
#Kasten{
Breite: 100px;
Höhe: 100px;
Hintergrundfarbe: Aquamarin;
Rahmenradius: 14px;
Kastenschatten: 2px 2px 6px rgba (0,0,0,.3);
/* Hey Leute, ihr wollt euch bewegen und die linke Seite ändern, ohne die Position festzulegen. . . */
Position: absolut;
}
</Stil>
</Kopf>
<Text>
<div id="box"></div>
<Skript>
let box = document.getElementById("box");
box.onmousedown=Funktion(Ereignis){
let disx = event.clientX-box.offsetLeft;
let disy=event.clientY-box.offsetTop;
//Dies ist nicht box.onmousemove, sondern document.onmousemove.
document.onmousemove=Funktion(Ereignis){
box.style.left=event.clientX-disx+'px';
box.style.top=event.clientY-disy+'px';
}
//In ommousedown zu schreiben document.onmouseup=function(){
//Setze beide auf null
Dokument.onmousemove=null;
Dokument.onmouseup=null;
gibt false zurück;
}
}
</Skript>
</body>
</html>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:
|
<<: So deinstallieren Sie MySQL sauber (getestet und effektiv)
>>: CSS realisiert die Layoutmethode „Fest links“ und „Adaptiv rechts“
Artikel empfehlen
So aktivieren oder deaktivieren Sie Linux-Dienste mit den Befehlen chkconfig und systemctl
Dies ist ein wichtiges (und wunderbares) Thema fü...
Beispielcode zur Implementierung von dynamischem Skinning mit vue+element
Manchmal kann das Thema eines Projekts nicht jede...
Methode und Optimierungsprinzip für langsame MySQL-Abfragen
1. Zum Vergleich der Datumsgröße muss das an XML ...
JS Cross-Domain-Lösung React-Konfiguration Reverse-Proxy
Domänenübergreifende Lösungen jsonp (get simulier...
Docker setzt Macvlan ein, um eine hostübergreifende Netzwerkkommunikation zu erreichen
Grundlegendes Konzept: Funktionsprinzip von Macvl...
Einige Erfahrungen zum Aktivieren von HTTPS
Da sich die heimische Netzwerkumgebung immer weit...
Schritte für IDEA zur Integration von Docker zur Realisierung einer Remote-Bereitstellung
1. Aktivieren Sie den Remotezugriff auf den Docke...
js implementiert Tabellen-Drag-Optionen
In diesem Artikelbeispiel wird der spezifische JS...
So starten Sie ein JAR-Paket und führen es unter Linux im Hintergrund aus
Der Linux-Befehl zum Ausführen des JAR-Pakets lau...
HTML-Grundlagen_Allgemeine Tags, allgemeine Tags und Tabellen
Teil 1 HTML <html> – Start-Tag <Kopf>...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.11 (Win10)
In diesem Artikel werden die Installations- und K...
Teilen Sie den detaillierten Prozess zum Einrichten von Mysql5.6, um externen Netzwerkzugriff zu ermöglichen
Ich habe kürzlich MySQL 5.6 bereitgestellt und fe...
Erläuterung der neuen Funktion von Hadoop 2.X, der Papierkorbfunktion
Durch Aktivieren der Papierkorbfunktion können Si...
So verwenden Sie die Positionierung, um Elemente zu zentrieren (Tipps zum Webseiten-Layout)
So zentrieren Sie ein Element im Browserfenster H...
Beispiel für die Generierung von Zufallszahlen und die Verkettung von Zeichenfolgen in MySQL
Dieser Artikel beschreibt anhand eines Beispiels,...