1. Subform
Beim Entwerfen einer Website müssen wir einige modale Unterformen entwerfen, wie z.
Dieser Schritt ist einfach zu implementieren, nur Div+CSS ist in Ordnung. Weitere Informationen finden Sie im Code:
Die Codekopie lautet wie folgt:
<div> </div>
<div>
<div>
<Center> Klicken auf den Blockbereich kann meine Position </center> ändern
</div>
</div>
Die Codekopie lautet wie folgt:
.modal-background
{
Hintergrundfarbe: #999999;
unten: 0;
links: 0;
Deckkraft: 0,3;
Position: fest;
Rechts: 0;
Top: 0;
Z-Index: 1100;
}
.Modal-Window
{
Hintergrundfarbe: #fffff;
Grenze: 1PX Solid #6b94ad;
Box-Shadow: 5px 5px 5px #6b94ad;
Schriftfamilie: 'Microsoft Yahei';
Schriftgröße: 12px;
Höhe: 120px;
Links: 50%;
Rand -Links: -160px;
Rand: -160px;
Deckkraft: 1;
Position: fest;
Top: 50%;
Breite: 320px;
Z-Index: 1110;
}
.Modal-Window .head
{
Höhe: 25px;
Farbe: #ffff;
Schriftgewicht: 600;
Hintergrund-Image: -moz-linear-Gradient (Top, #4A8CC5, #2963A5);
Hintergrund-Image: -Webkit-Gradient (linear, links, links unten, Farbstop (0, #4a8cc5), Farbstopp (1, #2963a5));
Filter: Progid: DimaTransform.Microsoft.gradient (StartColorStr = '#4A8CC5', EndColorStr = '#2963a5', GradientType = '0'); :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
}
.Modal-Window .head Center
{
Padding-Top: 2px;
}
Das Hinzufügen des obigen HTML und CSS kann leicht den Effekt der obigen Modalform erreichen. Wo links: 50%: 50%Rand: -160px;
Natürlich ist die Größe der modalen Form in der Stilklasse geschrieben.
Die Codekopie lautet wie folgt:
<div> </div>
<div>
<div>
<Center> Klicken auf den Blockbereich kann meine Position </center> ändern
</div>
</div>
Die zweite Codezeile wird an die Klasse. List-Window-Stil angehängt, um die Größe und Position in der .modal-Window-Klasse zu überschreiben, stellt jedoch auch sicher, dass die modale Form zentriert und angezeigt wird.
Die Codekopie lautet wie folgt:
.List-Window
{
Breite: 600px;
Höhe: 400px;
Rand-Links: -300px;
Rand: -200px;
}
Wie gezeigt
Es ist zu erkennen, dass die Implementierung dieses Schritts sehr einfach ist.
2. Wenn die Maus auf den Kopf der Unterform klickt, wie kann man die Unterform ziehen und verschieben? Nach der Einführung von JQ benötigen wir nur wenige Skripte, um diese kleine Funktion zu lösen. Wenn Sie es nicht glauben, lassen Sie uns sehen
Die Codekopie lautet wie folgt:
var links, oben, $ this;
$ (Dokument) .Delegate ('. Modal-Window .head', 'Mousedown', Funktion (e) {
links = e.clientx, top = e.clienty, $ this = $ (this) .css ('Cursor', 'Move');
this.setcapture? (
this.setcapture (),
this.onmousemove = function (ev) {Mousemove (ev || Ereignis);
this.onmouseUp = mausup
): $ (Dokument) .bind ("Mousemove", Mousemove) .bind ("Mausup", Mauseup);
});
Funktion Mousemove (e) {
var target = $ this.Parents ('. Modal-Window');
var l = math.max ((e.clientx -links + number (target links);
var t = math.max ((e.clienty -ober + number (target.css Spitze);
l = math.min (l, $ (Fenster) .Width () - target.width () - target.position (). links);
t = math.min (t, $ (Fenster) .Height () - target.height () - target.position (). top);
links = e.clientx;
top = e.clienty;
target.css ({'margin-links': l, 'margin-top': t});
}
Funktion Mauseup (e) {
var el = $ this.css ('Cursor', 'Standard'). Get (0);
El.Releascapture?
(
El.Releascapture (),
el.onmousemove = el.onmouseUp = null
): $ (Dokument) .unbind ("Mousemove", Mousemove) .unbind ("MouseUp", MouseUp);
}
Dieser Code ist sehr kurz und kann in verschiedenen Browsern reibungslos ausgeführt werden.
Tatsächlich ist sein Implementierungsprinzip sehr einfach und grob in drei Schritte unterteilt:
① Wenn die Maus am Kopf der modalen Form unter Mousedown ist, binden Sie sofort Mousemove- und Mausup -Ereignisse an das Dokument.
② Wenn die Maus nicht auftaucht (kein Mausup), aktivieren Sie die Mousemove -Funktion und bewegen Sie die Position der gesamten Form zeitlich, indem Sie den Abstand, den die Maus bewegt, in der Zeit berechnet.
③Wenn die Maus abprallt (Mausup), rufen Sie das Mausup -Event an, um das Mousemove -Ereignis und das MouseUp -Ereignis zu entbinden, das auf dem Dokument gebunden ist.
Das Prinzip des gesamten Prozesses lautet: Wenn die Maus -Mousedown nach unten gerichtet ist, wird das Mausbewegungsereignis in das Dokument übertragen und das gesamte Formular über das Mausbewegungsereignis im Dokument verarbeitet.
Darüber hinaus gibt es einen kleinen Trick in Mousemove, der globale linke. Wie weit hat sich die Maus bewegt.
Nach der Analyse dieses Codes wurde festgestellt, dass die Maus das Formular oder jedes Element des Dokuments bewegt.
Wenn Sie beispielsweise die Größe des Formulars durch Ziehen und Ablegen ändern möchten, müssen wir nur die Größe des Formulars in der Mousemove -Event -Handhabungsfunktion anpassen, und es wird in Ordnung sein. sich wieder verbessert?
Einige Leute fragen sich vielleicht, welche SetCapture bzw. die Veröffentlichung für die Veröffentlichung tun? In der Tat ist dies für die Kompatibilität. SetCapture ermöglicht das aktuelle Element, alle Ereignisse der Maus zu erfassen.