Contoh ini akan membagikan kepada Anda kode implementasi spesifik dari jendela seret pop-up JavaScript untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Deskripsi Persyaratan:
1. Klik tombol Halaman untuk memunculkan jendela;
2. Memiliki topeng latar belakang tembus;
3. Jendela pop-up memiliki sudut-sudut bulat, jendelanya tembus cahaya, tetapi isinya buram; dengan bayangan;
4. Jendela dapat diseret;
5. Setelah drag berhenti, posisi jendela tetap tidak berubah saat menggulir halaman;
6. Anda dapat menggunakan jQuery;
7. Ada tombol Tutup;
Deskripsi fungsional lebih lanjut:
Klik tombol dan akan ada lapisan mengambang yang dapat diseret keluar.
Ada topeng latar belakang yang mendukung menyeret dan menjatuhkan bilah judul. Menyeret di luar area bilah judul tidak berpengaruh. Fungsi seret terbatas, dan fungsi seretnya terbatas pada area yang terlihat.
Ide Seret:
Dapatkan posisi mouse. Saat mouse bergerak, dapatkan posisi mouse, dapatkan sumbu X sumbu-y, tetapkan ke sumbu x-sumbu-y jendela, dan buat jendela benar-benar diposisikan. Batalkan acara ini saat mouse dirilis.
Prinsip Implementasi Seret dan Jatuhkan:
Ketika mouse bergerak, posisi koordinat lapisan mengambang terus diperbarui ketika mouse bergerak.
1. Ketika mouse menekan elemen mengambang, tandai elemen mengambang karena dapat diseret.
2. Saat mouse bergerak, pertama -tama kami memeriksa apakah fluktuasi tanda elemen mengambang dapat diseret. Jika demikian, biarkan lapisan mengambang bergerak dengan mouse, dan abaikan jika tidak.
3. Ketika mouse dilepaskan, elemen mengambang tidak dapat diseret.
4. JS dan drop terutama menggunakan tiga acara tikus: mousedown, mousemove, dan mouseup.
Mousedown: Tekan mouse
Mouseup: Lepaskan mouse
Mousemove: Gerakan tikus
Catatan : Perbedaan antara mousedown dan klik: Seluruh proses klik mousedown akan terjadi dengan tiga peristiwa: mousedown → mouseup → klik, dan klik tidak akan terjadi setelah mouse dilepaskan di akhir.
Berbicara tentang ini, kita harus berbicara tentang acara mouse.
Mari kita bicara secara singkat tentang acara mouse di bawah ini:
(1) Klik acara
(2) Acara DBClick
(3) Acara Mousedown
(4) Acara MouseUp
(5) Acara Mouseenter
(6) Acara Mouseover
(7) Acara Mouseleaver
(8) Acara MouseOut
Penjelasan : (Penjelasan acara mouse dipilih dari W3School)
(1) Klik Event: Acara klik dipicu ketika pengguna mengetuk tombol kiri mouse pada elemen dan melepaskan tombol kiri pada elemen yang sama.
(2) Acara DBClick: Ketika elemen diklik dua kali, acara DBLClick akan terjadi. Klik terjadi ketika penunjuk mouse tetap di atas elemen dan kemudian menekan dan melepaskan tombol mouse kiri. Dua klik terjadi dalam waktu yang sangat singkat, yang merupakan acara klik dua kali.
Contoh:
Saat mengklik dua kali tombol, sembunyikan atau tampilkan elemen:
$ (dokumen) .ready (function () {$ ("tombol"). dblClick (function () {$ ("p"). slidetoggle ();});});(3) Acara Mousedown: Ketika pointer mouse bergerak di atas elemen dan menekan tombol mouse, acara mousedown akan terjadi. Berbeda dengan acara klik, acara mousedown hanya membutuhkan kunci untuk ditekan dan tidak perlu dirilis untuk terjadi.
$ (dokumen) .ready (function () {$ ("tombol"). mousedown (function () {$ ("p"). slidetoggle ();});});(4) Acara MouseUp: Ketika tombol mouse santai pada elemen, acara mouseUp akan terjadi.
Berbeda dengan acara klik, acara MouseUp hanya membutuhkan tombol santai. Ketika pointer mouse berada di atas elemen, tombol santai memicu acara.
$ (dokumen) .ready (function () {$ ("tombol"). mouseUp (function () {$ ("p"). slideToggle ();});});(5) Acara MouseEnter: Ketika pointer mouse melewati elemen, acara Mouseenter akan terjadi. Acara ini digunakan sebagian besar waktu dengan acara Mouseleave.
Catatan: Tidak seperti acara Mouseover, acara Mouseenter hanya akan dipicu ketika pointer mouse melewati elemen yang dipilih. Jika pointer mouse melewati elemen anak, acara mouseover juga akan dipicu.
(6) Acara Mouseover: Ketika pointer mouse di atas elemen, acara mouseover akan terjadi. Acara ini digunakan sebagian besar waktu dengan acara Mouseout.
Catatan: Tidak seperti acara Mouseenter, acara mouseover akan dipicu terlepas dari apakah pointer mouse melewati elemen yang dipilih atau elemen anaknya. Acara Mouseenter hanya akan dipicu ketika penunjuk mouse melewati elemen yang dipilih.
$ (dokumen) .ready (function () {$ ("p"). mouseover (function () {$ ("p"). css ("latar belakang-warna", "kuning");}); $ ("p"). mouseout (function () {$ ("p"). css ("latar belakang-warna", "#E9E9E9E9E9E9E9);Perbedaan antara Mouseenter dan Mouseover
<html> <head> <script type = "text/javaScript" src = "/jQuery/jQuery.js"> </script> <script type = "text/javascript"> x = 0; y = 0; $ (dokumen) .ready (function () {$ ("div.over"). mouseOver (function () {$ (". over span"). text (x+= 1);}); $ ("Div.enter"). MouseEnter (function () {$ ("masukkan rentang"). Teks (y+= 1);}); </script> </head> <body> <p> Acara mouseover akan dipicu terlepas dari apakah pointer mouse melewati elemen yang dipilih atau elemen anaknya. </p> <p> Acara mouseenter hanya akan dipicu ketika pointer mouse melewati elemen yang dipilih. </p> <div style = "latar belakang-warna: lightgray; padding: 20px; lebar: 40%; float: kiri"> <h2 style = "latar belakang-warna: putih;"> acara mouseover flash: <span> </span> </h2> </div> <div style = "latar belakang-warna: lightgray; padding: 20px; width; 40%hung: latar belakang: lightgray; padding: 20px; wid style = "latar belakang-warna: putih;"> acara mouseEnters flash: <span> </span> </h2> </div> </body> </html>(7) Acara Mouseleaver: Ketika pointer mouse melewati elemen, peristiwa mouseenter akan terjadi.
Acara ini digunakan sebagian besar waktu dengan acara Mouseleave.
Catatan: Tidak seperti acara Mouseout, acara Mouseleave hanya akan dipicu ketika penunjuk mouse meninggalkan elemen yang dipilih. Jika penunjuk mouse meninggalkan elemen anak, acara mouseout juga akan dipicu.
(8) Acara MouseOut
Peristiwa mouseout terjadi ketika penunjuk mouse dipindahkan dari elemen.
Acara ini digunakan sebagian besar waktu dengan acara Mouseover.
Catatan: Tidak seperti acara Mouseleave, acara Mouseout akan dipicu terlepas dari apakah penunjuk mouse meninggalkan elemen yang dipilih atau elemen anak apa pun. Peristiwa mouseleave hanya akan dipicu ketika penunjuk mouse meninggalkan elemen yang dipilih.
Silakan lihat contoh demonstrasi berikut.
<html> <head> <script type = "text/javaScript" src = "/jQuery/jQuery.js"> </script> <script type = "text/javascript"> x = 0; y = 0; $ (dokumen) .ready (function () {$ ("div.out"). mouseout (function () {$ (". out span"). text (x+= 1);}); $ ("Div.leave"). Mouseleave (function () {$ (". Cuti rentang"). Teks (y+= 1);}); </script> </head> <body> <p> Acara mouseout akan dipicu terlepas dari apakah penunjuk mouse meninggalkan elemen yang dipilih atau elemen anak apa pun. </p> <p> Peristiwa mouseleave hanya akan dipicu ketika penunjuk mouse meninggalkan elemen yang dipilih. </p> <div style = "latar belakang-warna: lightgray; padding: 20px; lebar: 40%; float: kiri"> <h2 style = "latar belakang-warna: putih;"> acara mouseout flash: <span> </span> </h2> </div> <div style = "latar belakang-warna: lightgray; padding: 20px; width; 40%hung: latar belakang: lightgray; padding: 20px; width; 40%hung: latar belakang: lightgray; padding: 20px; wid style = "latar belakang-color: white;"> acara mouseleave flash: <span> </span> </h2> </div> </body> </html>Catatan: Artikel ini asli, alamat: http://www.cnblogs.com/wanghuih/p/5569438.html
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.