JavaScript implementiert die Maussteuerung eines frei beweglichen Fensters
|
In diesem Artikel wird der spezifische JavaScript-Code zur Realisierung der Maussteuerung eines freien Fensters zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt
Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Fenster mit der Maus verschieben</title>
<Stil>
.mainDiv {
Breite: 350px;
Höhe: 200px;
Rand: 2px schwarz durchgezogen;
Position: absolut;
}
.titleDiv {
Breite: 350px;
Höhe: 30px;
Hintergrundfarbe: GelbGrün;
Textausrichtung: zentriert;
Zeilenhöhe: 30px;
}
.contentDiv {
Breite: 350px;
Höhe: 170px;
Hintergrundfarbe: Sandbraun;
Textausrichtung: zentriert;
}
</Stil>
</Kopf>
<Text>
<!--onmousedown: Das Ereignis tritt ein, wenn die Maustaste gedrückt wird; onmousemove: Das Ereignis tritt ein, wenn der Mauszeiger zum angegebenen Objekt bewegt wird-->
<div Klasse="mainDiv" id="mainDiv" Stil="oben: 20px;links: 20px">
<div Klasse="titleDiv" id="titleDiv" onmousedown="Maus nach unten()" onmouseup="Maus nach oben()">
Titelleiste</div>
<div Klasse="InhaltsDiv">
《Freies Fenster mit der Maus steuerbar》<br>
Hinweis: MainDiv kann nicht verschoben werden, bevor seine Position auf absolut gesetzt ist</div>
</div>
<Skript>
var dx;
vardy;
var mainDivObj = null;
var titleDivObj = null;
/**
* Mausdrückfunktion, führe diese Funktion aus, wenn die Maus gedrückt wird*/
Funktion MausRunter() {
//Erhalte den Wert der Maustaste. 0 ist die linke Maustaste, 1 ist die Scroll-Taste der Maus, 2 ist die rechte Maustaste. if (event.button == 0) {
mainDivObj = document.getElementById("mainDiv");
titleDivObj = document.getElementById("titleDiv");
//Mausstil festlegen titleDivObj.style.cursor = "move";
//Den Schattenstil des Haupt-Div festlegen mainDivObj.style.boxShadow = "0px 0px 10px #000";
//Die aktuellen Koordinaten der Maus abrufen let x = event.x;
sei y = Ereignis.y;
dx = x - parseInt(mainDivObj.style.left);
dy = y - parseInt(mainDivObj.style.top);
}
}
//Aufruf, wenn die Maus bewegt wird document.onmousemove = mouseMove;
/**
* Drücken Sie die Maus, um die Funktion zu verschieben. Wenn sich die Maus bewegt, wird die Funktion ausgeführt, um das Div zu verschieben
*/
Funktion Mausbewegung() {
wenn (mainDivObj != null) {
//Koordinatenposition der aktuellen Mausbewegung abrufen let x = event.x; //X-Achsenkoordinate der Mausbewegung let y = event.y; //Y-Achsenkoordinate der Mausbewegung //Distanz zwischen der linken und oberen Seite des Div nach der Bewegung berechnen //Die aktuellen Koordinaten verwenden, um die Distanz zwischen der Mausposition im Div und der linken und oberen Seite des Div zu subtrahieren let left = x - dx;
sei top = y - dy;
//Neue Koordinatenposition von div festlegen mainDivObj.style.left = left + "px";
mainDivObj.style.top = oben + "px";
}
}
/**
* Maus-Loslassen-Funktion, diese Funktion wird ausgeführt, wenn die Maus losgelassen wird*/
Funktion Maus nach oben () {
wenn (mainDivObj != null) {
dx = null;
dy = null;
//Den Schattenstil von div festlegen mainDivObj.style.boxShadow="none";
mainDivObj = null;
titleDivObj.style.cursor="Zeiger";
titleDivObj = null;
}
}
</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:
|
<<: Beispiel für die Erschöpfung der MySQL-Auto-Increment-ID
>>: Hadoop 3.1.1 Vollständig verteiltes Installationshandbuch unter CentOS 6.8 (empfohlen)
Artikel empfehlen
Von Alibaba Cloud OSS hochgeladener Implementierungscode für die Nginx-Proxy-Weiterleitung
Vorwort Da für den Upload des Miniprogramms https...
Detaillierte Erklärung einiger häufig verwendeter Schriftgrößen, Schrifteinheiten und Zeilenhöhen in CSS
px (Pixel) Ich glaube, jeder ist mit dem Begriff ...
Detaillierte Erläuterung des Implementierungsprozesses der ServerSocket-Standard-IP-Bindung
Wenn der Server während der Entwicklung gestartet...
Beispiel für die Konvertierung von JavaScript-Datentypen (Konvertieren anderer Typen in Zeichenfolgen, numerische Typen und Boolesche Typen)
Vorwort Was ist Datentypkonvertierung? Der Standa...
Node.js erstellt ein einfaches Crawler-Case-Tutorial
Vorbereitung Zuerst müssen Sie nodejs herunterlad...
Vue implementiert einen Login-Verifizierungscode
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erklärung der 4 Möglichkeiten zum Importieren von CSS-Dateien: inline, inline, extern und importiert
CSS-Importmethode - Inline Durch das Style-Tag-At...
Implementierungsmethode für den React State-Zustand und Lebenszyklus
1. Methoden zur Implementierung von Komponenten:組...
Natives JS zum Erzielen von Laufschrifteffekten
Heute werde ich Ihnen einen Laufschrifteffekt zei...
Detaillierte Erläuterung der benutzerdefinierten Vue-Anweisungen
Inhaltsverzeichnis Benutzerdefinierte Vue-Direkti...
Der MySQL-Server wird mit der Option --skip-grant-tables ausgeführt.
Der MySQL-Server läuft mit der Option --skip-gran...
So handhaben Sie lange Daten bei der Anzeige in HTML
Bei der Anzeige langer Daten in HTML können Sie di...
Zwei Möglichkeiten zum Löschen von Floats in HTML
1. Methode 1 zum Löschen von Floating Legen Sie d...
Detaillierte Verwendung des Docker-Maven-Plugins
Inhaltsverzeichnis Docker-Maven-Plugin Schritte z...
Implementierung des Imports und Exports von Vue-Element-Admin-Projekten
vue-element-admin importiert Komponentenkapselung...