Dieser Artikel zeigt ein verschiebbares Anmeldefeld, das mit nativem JS implementiert wurde. Der Effekt ist wie folgt: Der implementierte Code lautet wie folgt: <!DOCTYPE html> <html> <Kopf> <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" /> <title>Natives JS zur Implementierung eines verschiebbaren Anmeldefelds</title> <style type="text/css"> Körper { /* Hintergrundbild */ Hintergrund: URL (Bilder/0.png) #fff oben Mitte, keine Wiederholung; Polsterung: 0px; Rand: 0px; Schriftgröße: 12px; Schriftfamilie: „Microsoft YaHei“; } .Verknüpfung { Textausrichtung: rechts; Zeilenhöhe: 20px; Polsterung rechts: 40px; } .ui-dialog { Breite: 380px; Höhe: automatisch; Anzeige: keine; Position: absolut; Z-Index: 9000; oben: 0px; links: 0px; Rand: 1px durchgezogen #D5D5D5; Hintergrund: #fff; } .ui-dialog ein { Textdekoration: keine; } .ui-dialog-title { Höhe: 48px; Zeilenhöhe: 48px; Polsterung: 0px 20px; Farbe: #535353; Schriftgröße: 16px; Rahmen unten: 1px durchgezogen #efefef; Hintergrund: #f5f5f5; Cursor: bewegen; Benutzerauswahl: keine; } .ui-dialog-closebutton { Breite: 16px; Höhe: 16px; Anzeige: Block; Position: absolut; oben: 12px; rechts: 20px; /* Symbol „Anmeldefeld schließen“*/ Hintergrund: URL (Bilder/1.png) keine Wiederholung; Cursor: Zeiger; } .ui-dialog-closebutton:hover { /* Schließen Sie das Symbol des Anmeldefelds, wenn Sie mit der Maus darüber fahren */ Hintergrund: URL (Bilder/2.png); } .ui-dialog-inhalt { Polsterung: 15px 20px; } .ui-dialog-pt15 { Polsterung oben: 15px; } .ui-dialog-l40 { Höhe: 40px; Zeilenhöhe: 40px; Textausrichtung: rechts; } .ui-dialog-input { Breite: 100 %; Höhe: 40px; Rand: 0px; Polsterung: 0px; Rand: 1px durchgezogen #d5d5d5; Schriftgröße: 16px; Farbe: #c1c1c1; Texteinzug: 25px; Gliederung: keine; } .ui-dialog-input-Benutzername { /* Benutzernamensymbol eingeben*/ Hintergrund: URL (Bilder/4.png) keine Wiederholung 2px; } .ui-dialog-input-password { /* Symbol „Passwort eingeben“*/ Hintergrund: URL (Bilder/3.png) keine Wiederholung 2px; } .ui-dialog-submit { Breite: 100 %; Höhe: 50px; Hintergrund: #3b7ae3; Rand: keiner; Schriftgröße: 16px; Farbe: #fff; Gliederung: keine; Textdekoration: keine; Anzeige: Block; Textausrichtung: zentriert; Zeilenhöhe: 50px; } .ui-dialog-submit:hover { Hintergrund: #3f81b0; } .ui-Maske { Breite: 100 %; Höhe: 100%; Hintergrund: #000; Position: absolut; oben: 0px; Höhe: 0px; Z-Index: 8000; Deckkraft: 0,4; /*Kompatibel mit niedrigeren IE-Versionen*/ Filter: Alpha (Deckkraft = 40); } </Stil> </Kopf> <Text> <div Klasse="Link"> <a href="javascript:showDialog();" >Anmelden</a> </div> <!-- Legen Sie eine Hintergrundmaskenebene fest, um Mausauswahlereignisse zu verhindern--> <div Klasse = "ui-mask" id = "mask" onselectstart = "return false" ><div> <div class="ui-dialog" id="dialogMove" onselectstart='return false;'> <div class="ui-dialog-title" id="dialogDrag" onselectstart="return false;"> Anmeldekennwort<a class="ui-dialog-closebutton" href="javascript:hideDialog();" ></a> </div> <div Klasse="ui-dialog-content"> <div Klasse="ui-dialog-l40 ui-dialog-pt15"> <input class="ui-dialog-input ui-dialog-input-username" type="input" value="Mobiltelefon/E-Mail/Benutzername" /> </div> <div Klasse="ui-dialog-l40 ui-dialog-pt15"> <input Klasse="ui-dialog-input ui-dialog-input-password" Typ="input" Wert="Passwort" /> </div> <div Klasse="ui-dialog-l40"> <a href="#" >Passwort vergessen</a> </div> <div> <a class="ui-dialog-submit" href="#" >Anmelden</a> </div> <div Klasse="ui-dialog-l40"> <a href="#" >Jetzt registrieren</a> </div> </div> </div> <Skripttyp="text/javascript"> //Deklarieren Sie die Methode zum Abrufen der Elementobjektfunktion $(id) { return document.getElementById(id); } //Deklarieren Sie die Methode zur automatischen Zentrierung des Elements (el = Element) Funktion autoCenter(el) { //Breite und Höhe des sichtbaren Bereichs der Webseite abrufen var bodyW = document.documentElement.clientWidth; var bodyH = Dokument.documentElement.clientHeight; //Tatsächliche Breite und Höhe des übergebenen Elements abrufen var elW = el.offsetWidth; var elH = el.offsetHeight; //Setzen Sie die linke Seite des Elements auf die Breite des sichtbaren Bereichs minus seiner eigenen Breite geteilt durch 2, und dasselbe für die obere Seite el.style.left = (bodyW - elW) / 2 + 'px'; el.style.top = (bodyH - elH) / 2 + "px"; } //Elemente automatisch auf die gesamte Anzeigefläche erweitern function fillToBody(el) { //Setzen Sie die Breite und Höhe des aktuellen Elements auf die Breite und Höhe des sichtbaren Bereichs el.style.width = document.documentElement.clientWidth + 'px'; el.style.height = document.documentElement.clientHeight + 'px'; } //Setze den Anfangswert der Maus in X- und Y-Richtung auf 0 var mouseOffsetX = 0; var mouseOffsetY = 0; //Ob es gezogen werden kann, var isDraging = false; // Mausereignis 1 – berechnet die Koordinaten der Maus relativ zur oberen linken Ecke des gezogenen Elements und markiert das Element als verschiebbar $('dialogDrag').addEventListener('mousedown', function (e) { //Kompatibel mit dem Mausereignismechanismus des Internet Explorers var e = e || window.event; //Der Mausversatz entspricht der X-Koordinate beim Drücken der Maus im aktuellen Ereignis abzüglich der Position der schwebenden Anmeldeebene relativ zur linken Seite der Seite mouseOffsetX = e.pageX - $('dialogMove').offsetLeft; //Der Mausversatz entspricht der Y-Koordinate beim Drücken der Maus im aktuellen Ereignis abzüglich der Position der schwebenden Anmeldeebene relativ zum oberen Seitenrand mouseOffsetY = e.pageY - $('dialogMove').offsetTop; //Setze das Draggable-Flag auf „true“. istDraging = wahr; }) // Mausereignis 2 - wenn die Maus bewegt wird, prüfen, ob das Element als verschiebbar markiert ist. //Wenn ja, aktualisiere die Position des Elements auf die aktuelle Mausposition (abzüglich des im ersten Schritt ermittelten Offsets) document.onmousemove = Funktion (e) { //Kompatibel mit dem Mausereignismechanismus des Internet Explorers var e = e || window.event; //Ruf die Position der Maus auf der aktuellen Seite an (obere linke Ecke der Webseite). e.pageX und e.pageY haben unterschiedliche Werte, wenn die Maus gedrückt wird. var mouseX = e.pageX; var mouseY = e.pageY; //Zeichne die x- und y-Koordinaten auf, wenn die Maus bewegt wird. var moveX = 0; var bewegeY = 0; //Wenn Ziehen aktuell möglich ist if (isDraging === true) { //Die Position des gezogenen Elements entspricht der Position der Maus relativ zur Seite abzüglich der Position der Maus relativ zur oberen linken Ecke des gezogenen Elements moveX = mouseX - mouseOffsetX; bewegeY = MausY - MausversatzY; //Maximale Breite und Höhe der Seite ermitteln (beachten Sie den Unterschied zwischen clientWidth und offsetWidth) var Seitenbreite = Dokument.Dokumentelement.Clientbreite; var Seitenhöhe = Dokument.Dokumentelement.Clienthöhe; //Die Breite und Höhe des schwebenden Ebenenobjekts var dialogWidth = $('dialogMove').offsetWidth; var dialogHeight = $('dialogMove').offsetHeight; //Den maximalen verschiebbaren Wert berechnen var maxX = Seitenbreite - Dialogbreite; var maxY = Seitenhöhe - Dialoghöhe; //Treffen Sie eine Entscheidung, um ein Ziehen aus dem zulässigen Bereich zu verhindern moveX = Math.min(maxX, Math.max(0, moveX)); bewegeY = Math.min(maxY, Math.max(0, bewegeY)); //Setze den neuen Wert des Drag-Elements $('dialogMove').style.left = moveX + 'px'; $('dialogMove').style.top = moveY + 'px'; } } //Mausereignis 3 - wenn die Maus losgelassen wird, markiere das Element als unbeweglich document.onmouseup = function () { istDraging = falsch; } //Zeige das Login-Fenster Funktion showDialog() { $('dialogMove').style.display = 'Block'; $('Maske').style.display = 'Block'; //Das Anmeldefeld ist zentriert autoCenter($('dialogMove')); //Stellen Sie die Maskenebene so ein, dass der Anzeigebereich gefüllt wird fillToBody($('mask')) } //Das Login-Feld ausblenden Funktion hideDialog() { $('dialogMove').style.display = 'keine'; $('mask').style.display = 'keine'; } //Die Verarbeitungsfunktion beim Ändern der Fenstergröße window.onresize = function () { //Das Anmeldefeld ist zentriert autoCenter($('dialogMove')); //Wenn das Anmeldefeld angezeigt wird, führen Sie die Anzeigefunktion der Maskenebene aus, wenn ($('dialogMove').style.display === 'block') { fillToBody($('Maske')) } } </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:
|
<<: Prozessdiagramm für das erste Bereitstellungs-Webprojekt von Tomcat
>>: Tutorial zu HTML-Tabellen-Tags (13): Regeln für interne Rahmenstilattribute
Zunächst stellt sich häufig die Frage: Welche Bez...
Unix/Linux-Dienste systemd-Dienste Betriebsablauf...
Wenn die erstellte Registerkartenbeschriftung den...
Konfiguration Vorwort Projektaufbau: basierend au...
Nach chinesischem Brauch feiern wir das neue Jahr...
Inhaltsverzeichnis Definition Die Rolle des Curso...
【Einführung】: Handtrack.js ist eine Prototypbibli...
Zusammenfassung gängiger Operatoren und Operatore...
Inhaltsverzeichnis Vorwort 1. Schlüsselelemente e...
Manchmal ist das Herunterladen großer Netzwerkdat...
Inhaltsverzeichnis 1. Projektaussichten 2. Wissen...
1.fullpage.js Download-Adresse https://github.com...
Code kopieren Der Code lautet wie folgt: <html...
Konzept Wenn der Index alle Daten enthält, die di...
1. Erstellen Sie eine Tabelle CREATE TABLE `stude...