Berdasarkan kebutuhan proyek, efek halaman berikut perlu dibuat: Ketika pengguna melewati avatar teman dalam daftar teman, informasi dasar teman ditampilkan, yang sebenarnya merupakan fungsi yang mirip dengan klien QQ.
Saya menemukan banyak kode secara online, dan pada dasarnya semuanya menyadari bahwa mouse itu ditangguhkan dan div muncul, dan kemudian menghilang segera setelah pergi. Ada juga beberapa kode CSS murni yang mencapai efek ini, tetapi mereka tidak berguna bagi saya. Yang saya butuhkan adalah JS (karena data saya perlu diperoleh melalui AJAX), dan mouse tidak dapat disembunyikan segera setelah pergi. Ada juga entri fungsi di div ini. Efek halaman ini telah melemparkan saya selama sehari, yang menunjukkan bahwa teknologi JS dan CSS saya perlu ditingkatkan ...
Setelah mencari waktu yang lama, saya akhirnya menemukan dua ide yang layak sebagai berikut. Ada contoh dari dua metode ini. Saya tidak menulisnya dan saya juga tidak menggunakannya. Mari kita bagikan dan alamat demo ditampilkan. Metode saya mengacu pada ide metode B.
Metode A:
Letakkan div floating dan elemen pemicu A di elemen induk yang sama, dan memicu tampilan saat mouse melewati elemen induk. Dengan cara ini, ketika mouse bergerak ke div, masih ada di dalam elemen induk, dan div tidak akan disembunyikan.
Metode B:
Div muncul ketika mouse melewati a. Ketika mouse meninggalkan A, timer diatur untuk mematikan div. Jika tikus bergerak ke Div, timer dibersihkan.
―666666 secara
Metode saya mengadopsi ide metode B di atas. Ketika pengguna meninggalkan gambar yang memicu acara, kartu data div perlu ditunda 3 detik sebelum ditutup. Pengguna memiliki cukup waktu untuk melakukan operasi yang sesuai. Ketika pengguna mengklik gambar teman lain, metode tersembunyi akan segera dipanggil untuk menutup pembukaan dan waktu div sebelumnya.
Ini kode JS untuk metode saya:
// tunjukkan kartu data var sebelumnya; // Tentukan fungsi variabel global showInfocard (thisoBj, id) {this.hidden (sebelumnya); // Segera sembunyikan div yang dipilih sebelumnya sebelumnya = id; // peringatan (id); // var d = $ (thisobj); // var pos = d.offset (); // var t = pos.top + d.height () - 5; // Posisi atas kotak pop -up // var l = pos.left - d.width () - 600; // Posisi kiri kotak pop-up // $ ("#"+id) .css ({"top": t, "left": l}). Show (); // var objdiv = $ ("#"+id); $ (objdiv) .css ("display", "block"); $ (objdiv) .css ("kiri", event.clientx-280); // Nilai x kotak pop-up adalah $ (objDiv) .css ("Top", event.clienty-10); // Nilai Y dari kotak pop-up adalah nilai y} fungsi hideInfocard (id) {// sembunyikan div // tunda selama 3 detik setTimeout ('tersembunyi ('+id+')', 3000); } function tersembunyi (id) {$ ("#"+id) .hide (); }Berikut ini adalah cuplikan kode div tersembunyi di html:
<Div id = "id" style = "display: none; lebar: 250px; tinggi: 150px; latar belakang-warna:#d1eeee; Posisi: absolute;"> </div>
Dalam HTML, Anda perlu memanggil metode ShowInfocard dan HideInfocard, dan dengarkan acara mouse menggunakan pernyataan berikut:
onMouseOver = "showInfocard (this, '$ {friend.friendId}')" onmouseout = "hideInfocard ('$ {friend.friendId}')"Ini adalah cuplikan kode dinamis. Saat menggunakannya, Anda perlu memperkenalkan kerangka kerja JQuery.js, dan tentu saja itu juga dapat dimodifikasi menjadi JS murni. Di atas selesai. AJAX memperoleh informasi, dan kemudian menggunakan JS untuk memasukkan kode HTML ke div di atas untuk menyelesaikan tampilan. Akhirnya, saya memiliki rendering pendahuluan, yang cukup jelek ...