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
Führen Sie die Schritte zum Einrichten automatischer Updates in CentOS 8 aus
Das Beste, was Sie für Ihre Daten und Computer tu...
Analyse und Lösung der Gründe, warum geplante Crontab-Aufgaben nicht ausgeführt werden
Vorwort Es gibt die folgenden Möglichkeiten, gepl...
Ladeanimation mit CSS3 implementiert
Ergebnisse erzielen Implementierungscode <h1&g...
So ändern Sie das Datenbankdatenspeicherverzeichnis in MySQL
Vorwort Die Standarddatenbankdatei der MySQL-Date...
Was ist der Unterschied zwischen HTM und HTML? Was ist der Unterschied zwischen HTM und HTML?
Während ich Webdesign lernte, habe ich mich nicht...
Linux löst das Problem, dass Deepin den Google Chrome-Browser nicht als Root-Benutzer starten kann
Um das Problem zu lösen, dass Deepin den Google C...
Tutorial zur HTML-Tabellenauszeichnung (6): Farbattribut für dunkle Rahmen BORDERCOLORDARK
In einer Tabelle können Sie die Farbe des unteren...
MySql-Anmeldekennwort vergessen und Lösung für vergessenes Kennwort
Methode 1: MySQL bietet einen Befehlszeilenparame...
So zeigen Sie Div auf einem Objekt an, ohne durch die Objektanimation blockiert zu werden
Heute habe ich eine Menüschaltfläche erstellt. Wen...
Linux-Tutorial zum Ersetzen von Zeichenfolgen mit dem Befehl sed
Um eine Zeichenfolge zu ersetzen, müssen wir das ...
JavaScript zum Erzielen eines Zeitbereichseffekts
In diesem Artikel wird der spezifische Code für J...
Lösung zur Überprüfung des ID-Überlauffehlers bei automatischer Inkrementierung der MySQL-Tabelle
Problem: Der Überlauf der Auto-Increment-ID in ei...
Mehrere Möglichkeiten zum Aktualisieren von Batches in MySQL
Normalerweise verwenden wir die folgende SQL-Anwe...
So implementieren Sie geplante MySQL-Aufgaben unter Linux
Annahme: Die gespeicherte Prozedur wird täglich v...
Detaillierte Erläuterung der DOM-Stileinstellungen in vier Reaktionskomponenten
1. Inline-Stile Um Inline-Stile zum virtuellen DO...