Lanjutkan dengan implementasi sederhana JavaScript dari jendela seret pop-up (i) untuk belajar.
Berikut ini adalah analisis spesifik kode:
Pertama, mari kita konfirmasi strukturnya:
Jendela mengambang: Awalnya tidak terlihat. Termasuk judul bilah dan bilah konten, dengan bilah judul dan tombol tutup di dalam judul bilah.
Lapisan Topeng: Tidak terlihat di awal. Digunakan untuk mengatur latar belakang tembus saat jendela mengambang muncul.
Tombol: Digunakan untuk mengklik untuk memunculkan jendela mengambang.
Berikut ini akan menjelaskan secara rinci
1. Untuk memungkinkan jendela bergerak dengan bebas, posisi jendela harus absolut;
/*Login Floating Layer Component*/. Popup {display: None; /*Persembunyian awal*/ lebar: 380px; Tinggi: otomatis; /*Kebebasan tinggi, karena tidak pasti, berapa banyak konten. */ Border: 1px solid #d5d5d5; Latar Belakang: #FFFF; /*Konten jendela tidak jelas, latar belakangnya putih*/-shadow: 0 0 3px rgba (0, 0, 0, 0.25); -Moz-box-shadow: 0 0 3px rgba (0, 0, 0, 0.25); -webkit-box-shadow: 0 0 3px rgba (0, 0, 0, 0.25); /*Jendela konten dibayangi*/ perbatasan-radius: 8px; /* Semua sudut menggunakan sudut bulat dengan jari-jari 8px, properti ini adalah properti standar CSS3*/ -moz-border-radius: 8px; /* Atribut pribadi Browser Mozilla*/ -webkit-Border-Radius: 8px; /* Atribut pribadi browser webkit*//* jendela bundar sudut*/ posisi: absolute; Atas: 100px; Kiri: 100px; /*penentuan posisi absolut*/ z-index: 9000; }2. Tambahkan judul bilah ke jendela, dan atur kursor mouse dari judul bilah ke bentuk seret (pindahkan) (saat menyeret chrome, kursor akan menjadi kursor teks, dan itu akan dipulihkan setelah melepaskan tombol mouse). Di sini Anda perlu mengatur sudut bulat untuk sudut kiri atas dan kanan atas judul bar.
/*Area bilah judul*/. Popup_title {Height: 48px; Line-Height: 48px; /*Tengah secara vertikal*/ padding: 0px 20px; /*Membuat jarak tertentu dari kiri*/ latar belakang: #f5f5f5; /*Warna Latar Belakang*/ Border-Bottom: 1px solid #efefefef; /*Perbatasan bawah*/ perbatasan-radius: 8px 8px 0 0; /* Gunakan sudut bulat dengan jari -jari 5px di sudut kiri atas dan kanan atas. Properti ini adalah properti standar CSS3*/ -moz-border-radius: 8px 8px 0 0; /* Properti Pribadi Browser Mozilla*/ -webkit-Border-Radius: 8px 8px 0 0; /* Properti Pribadi Browser Webkit*//* Jendela Sudut Bulat*/ Warna: #535353; font-size: 16px; /* Warna font dan ukuran font*/ kursor: pindahkan; /* Gaya Bergerak*/ -Moz-Pengguna-Select: Tidak Ada; / * Firefox all */ -webkit-user-select: tidak ada; /* Chrome all / safari all / opera15+* / -ms-user-select: tidak ada; /* IE10*/ -Khtml-Pengguna-Select: tidak ada; /* Browser awal*/ pilih pengguna: tidak ada; -O-USER-SELECT: Tidak ada; /* Dua atribut di atas saat ini tidak didukung, jadi saya menulisnya di sini untuk mengurangi risiko*/}Berikut adalah beberapa poin pengetahuan untuk dipahami:
1. CSS3 (Border-Radius) Border Rounded Corners
Border-Radius adalah metode singkatan. Selain itu, keempat nilai diatur dalam urutan kiri atas, kanan atas, kanan bawah, kiri bawah, dan kiri bawah. Situasi utama akan terjadi dalam situasi berikut:
1. Jika hanya ada satu nilai, maka empat nilai kiri atas, kanan atas, kanan bawah, dan kiri bawah sama.
2. Ada dua nilai, maka kiri atas sama dengan kanan bawah, dan nilai pertama diambil; Right atas sama dengan kiri bawah, dan nilai kedua diambil
3. Ada tiga nilai, nilai pertama adalah mengatur kiri atas; Sementara nilai kedua adalah kanan atas dan kiri bawah dan mereka akan sama, dan nilai ketiga adalah mengatur kanan bawah.
4. Ada empat nilai, nilai pertama adalah mengatur kiri atas dan nilai kedua adalah kanan atas, nilai kanan ketiga kanan, dan nilai keempat adalah untuk mengatur kiri bawah.
Browser yang didukung:
2. Kursor: Pindahkan
Properti kursor menentukan jenis pointer (kursor) yang ditampilkan.
Ketika nilai properti bergerak, itu berarti bahwa objek yang dirujuk oleh kursor ini dapat dipindahkan, biasanya panah silang, seperti yang ditunjukkan pada gambar.
3. Pengguna-Select: Digunakan untuk mengontrol selektivitas konten
Nilai Auto-DeFault, pengguna dapat memilih konten di elemen
tidak ada - pengguna tidak dapat memilih konten apa pun di elemen
Teks-Pengguna dapat memilih teks di elemen
Elemen - Teks adalah opsional, tetapi hanya dalam batas -batas elemen (hanya didukung oleh IE dan FF)
Perlu dicatat bahwa pemilihan pengguna bukan atribut standar W3C CSS, dan browser mendukungnya secara tidak lengkap dan perlu disesuaikan untuk setiap browser.
Deskripsi Pilihan Pengguna:
Menetapkan atau mengambil apakah pengguna diizinkan untuk memilih teks.
(1) IE6-9 tidak mendukung properti ini, tetapi mendukung penggunaan atribut tag onselectStart = "return false;" Untuk mencapai efek pemilihan pengguna: tidak ada; Safari dan Chrome juga mendukung atribut tag ini;
(2) Properti ini tidak didukung sampai opera12.5, tetapi seperti IE6-9, itu juga mendukung penggunaan atribut tag pribadi yang tidak dapat dipilih = "on" untuk mencapai efek pemilihan pengguna: tidak ada;
(3) Nilai lain yang tidak dapat dipilih tidak dapat dipilih; Di browser lain, jika teks diatur ke -MS-USER-SELECT: tidak ada; Di browser lain, pengguna tidak akan dapat mulai memilih teks di blok teks.
Namun, jika pengguna mulai memilih teks di area lain halaman, pengguna masih dapat terus memilih teks area yang mengatur teks menjadi -ms-pengguna-select: tidak ada;.
Analisis kode berikut (Catatan: Kode ini dan hasil analisis kode ini berasal dari W3Help):
<! Doctype html> <html> <body> <v unselectable = "on" style = "latar belakang: #cc;" > tidak dapat dipilih = on </div> <br/> <div style = "latar belakang: #cc; -webkit-user-select: none;" > -webkit-user-select: none; </div> <br/> <div style = "latar belakang: #cc; -moz-user-soal: none;" > -moz-user-select: tidak ada; </div> <br/> <div style = "latar belakang: #cc;" OnSelectStart = "Return False;" > onSelectStart = "return false;" </div> </body> </html>
Efek di setiap browser adalah sebagai berikut:
Catatan 1: Konten dapat dinonaktifkan.
Catatan 2: Tidak ada konten yang dilarang dipilih.
Dapat dilihat bahwa metode untuk melarang pemilihan konten adalah sebagai berikut:
IE Set Unselectable = "on" untuk tag, dan atur metode tag onselectStart = "return false;"
Firefox menetapkan gaya pribadi untuk tag -Moz-pengguna-Select: tidak ada.
Chrome Safari menetapkan gaya pribadi untuk tag -webkit-pengguna-memilih: tidak ada, dan mengatur metode tag onSelectStart = "return false;".
Opera set tidak dapat dipilih = "on" untuk tag
Larutan
Setel gaya untuk label -moz-user-select: tidak ada; -webkit-pengguna-select: Tidak ada pada saat yang sama, atur tidak dapat dipilih = "on" untuk memastikan bahwa semua browser dapat melarang pemilihan konten.
Jika Anda mengatur gaya seleksi yang dilarang ke judul bilah jendela pop-up floating perbedaan dalam kasus ini, Anda dapat mengaturnya seperti ini:
<Div id = "Popup_Title" tidak dapat dipilih = "on"> login <a href = "javascript: hidepopup ();"> </a> </div>
.popup_title {-moz-user-select: tidak ada; / * Firefox all */ -webkit-user-select: tidak ada; /* Chrome all / safari all / opera15+* / -ms-user-select: tidak ada; /*IE10*/ -Khtml-Pengguna-Select: tidak ada; /* Browser Awal*/ Pilih Pengguna: Tidak Ada; -O-USER-SELECT: Tidak ada; /*Dua atribut di atas saat ini tidak didukung, ditulis di sini untuk mengurangi risiko*/}Catatan: Artikel ini asli, alamat: http://www.cnblogs.com/wanghuih/p/5576910.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.