1. Subform
Saat merancang situs web, kita perlu merancang beberapa subformitas modal, seperti
Langkah ini mudah diimplementasikan, hanya div+CSS tidak apa -apa, silakan lihat kodenya:
Salinan kode adalah sebagai berikut:
<div> </div>
<div>
<div>
<senter> Mengklik area blok dapat mengubah posisi saya </center>
</div>
</div>
Salinan kode adalah sebagai berikut:
.modal-background
{
Latar Belakang-Color: #999999;
Bawah: 0;
Kiri: 0;
Opacity: 0.3;
Posisi: diperbaiki;
Kanan: 0;
TOP: 0;
z-index: 1100;
}
.modal-window
{
Latar Belakang-Color: #FFFFF;
Perbatasan: 1px Solid #6B94AD;
Kotak-Shadow: 5px 5px 5px #6B94AD;
Font-Family: 'Microsoft Yahei';
font-size: 12px;
Tinggi: 120px;
Kiri: 50%;
margin -kiri: -160px;
margin -top: -160px;
Opacity: 1;
Posisi: diperbaiki;
Atas: 50%;
Lebar: 320px;
z-index: 1110;
}
.modal-window .head
{
Tinggi: 25px;
Warna: #FFFF;
Font-Weight: 600;
latar belakang-gambar: -moz-linear-gradient (atas, #4a8cc5, #2963a5);
latar belakang-gambar: -webkit-gradient (linear, atas kiri, bawah kiri, color-stop (0, #4a8cc5), color-stop (1, #2963a5));
Filter: Progid: dximagetransform.microsoft.gradient (startColorStr = '#4a8cc5', endcolorStr = '#2963a5', gradientType = '0'); ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
}
.Modal-Window. Head Center
{
Padding-top: 2px;
}
Menambahkan HTML dan CSS di atas dapat dengan mudah mencapai efek dari bentuk modal di atas. di mana: 50%; TOP: 50%;
Tentu saja, ukuran bentuk modal ditulis dalam kelas gaya. Modal-window.
Salinan kode adalah sebagai berikut:
<div> </div>
<div>
<div>
<senter> Mengklik area blok dapat mengubah posisi saya </center>
</div>
</div>
Baris kode kedua ditambahkan ke kelas gaya.
Salinan kode adalah sebagai berikut:
.list-window
{
Lebar: 600px;
Tinggi: 400px;
margin-kiri: -300px;
margin-top: -200px;
}
Seperti yang ditunjukkan
Dapat dilihat bahwa implementasi langkah ini sangat sederhana.
2. Ketika mouse mengklik kepala subformat, bagaimana cara menyeret dan memindahkan subform? Setelah memperkenalkan JQ, kami hanya perlu beberapa skrip untuk menyelesaikan fungsi kecil ini. Jika Anda tidak mempercayainya, mari kita lihat
Salinan kode adalah sebagai berikut:
var kiri, atas, $ ini;
$ (dokumen) .delegate ('. Modal-window .head', 'mousedown', function (e) {
kiri = e.clientx, top = e.clienty, $ this = $ (this) .css ('kursor', 'move');
ini.setCapture?
this.setCapture (),
this.onmouseMove = function (ev) {mousemove (ev || event);
this.onmouseup = mouseup
): $ (dokumen) .Bind ("Mousemove", Mousemove) .Bind ("MouseUp", MouseUp);
});
fungsi mousemove (e) {
var target = $ this.parents ('. Modal-window');
var l = Math.max ((E.ClientX -Left + Number (target.css ('margin -left'). Ganti (/px $/, '')) || 0), -target.position (). kiri);
var t = Math.max ((E.Clienty -Top + Number (target.css ('margin -top'). Ganti (/px $/, '')) || 0), -target.position (). atas);
l = math.min (l, $ (window) .width () - target.width () - target.position (). kiri);
t = Math.min (t, $ (window) .height () - target.height () - target.position (). Top);
kiri = E.ClientX;
top = e.clienty;
target.css ({'margin-left': l, 'margin-top': t});
}
fungsi mouseup (e) {
var el = $ this.css ('kursor', 'default'). get (0);
el.releasecapture?
(
el.releasecapture (),
el.onmouseMove = el.onmouseup = null
): $ (dokumen) .unbind ("mousemove", mousemove) .unbind ("mouseup", mouseup);
}
Kode ini sangat pendek dan dapatkah ia berjalan dengan lancar di berbagai browser.
Faktanya, prinsip implementasinya sangat sederhana dan dibagi secara kasar menjadi tiga langkah:
① Ketika tikus berada di bawah mousedown di kepala bentuk modal, segera mengikat peristiwa mousemove dan mouseUp ke dokumen.
② Ketika mouse tidak muncul (tidak ada mouseup), jika mouse bergerak dalam bentuk, aktifkan fungsi mousemove dan pindahkan posisi seluruh bentuk dalam waktu dengan menghitung jarak mouse bergerak.
③Ketika mouse terpental (MouseUp), hubungi acara MouseUp untuk membuka ikatan acara MouseMove dan acara mouseup yang terikat pada dokumen.
Prinsip dari seluruh proses adalah: Ketika mousedown tikus diturunkan, peristiwa gerakan mouse ditransfer ke dokumen, dan seluruh formulir diproses melalui peristiwa gerakan mouse pada dokumen.
Selain itu, ada trik kecil dalam mousemove, yang merupakan kiri global. Seberapa jauh mouse telah bergerak.
Setelah analisis kode ini, ditemukan bahwa mouse memindahkan formulir atau elemen apa pun pada dokumen cukup mudah.
Misalnya, jika Anda ingin mengubah ukuran formulir dengan menyeret dan menjatuhkan, kami hanya perlu menyesuaikan ukuran formulir dalam fungsi penanganan acara MouseMove dan akan baik -baik saja. ditingkatkan lagi?
Beberapa orang mungkin bertanya apa yang dilakukan masing -masing setCapture dan Releasecapture? Bahkan, ini untuk kompatibilitas IE. SetCapture memungkinkan elemen saat ini untuk menangkap semua peristiwa mouse.