1. Skenario aplikasi
Div muncul di atas mouse dan tidak dapat disembunyikan segera setelah mouse pergi, karena ada juga portal fungsi pada div ini. Misalnya:
Efek menampilkan kartu profil saat mouse melewati avatar teman dalam daftar teman adalah sebagai berikut:
Tampilkan kode QR saat melayang
2. Realisasi
Gunakan efek sederhana seperti ini: Mouse Hover untuk menampilkan B pada A untuk mensimulasikan
Ada dua cara untuk mengimplementasikannya. Yang kedua direkomendasikan. Yang pertama memiliki kelemahannya. Saya akan membicarakannya di bawah ini.
1. Metode 1
Prinsip: Letakkan elemen pemicu A dan elemen B yang ditampilkan dalam elemen induk yang sama, dan tampilan B dipicu ketika mouse melewati elemen induk. Dengan cara ini, ketika mouse bergerak ke B, div tidak akan disembunyikan.
Kode:
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> melayang tampilkan b </itement> <script src = "http://code.jquery.com/jquery-1.12.min.js"> </script> <style type = "text/css/css/css; margin: 10px 0 10px 10px; Lebar: 50px; Tinggi: 50px; Latar Belakang-Color: #CCC; }#msg-box {border: 1px solid black; Lebar: 200px; Tinggi: 150px; Tampilan: Tidak Ada; float: kiri; Padding: 10px} </tyle> </head> <body> <v id = "hoverwrap"> <div id = "hook"> a </div> <div id = "msg-box"> Modul fungsi b </div> </div> <script type = "text/javascript"> $ ("#hoverwrap"). Fungsi (). $ ("#msg-box"). toggle ();}); </script> </body> </html>Metode ini relatif mudah diimplementasikan, tetapi membutuhkan pembungkus lapisan tag induk dan memiliki kelemahan: kedua elemen tidak dapat ditempatkan.
2. Metode 2
Prinsip: Ketika mouse melewati A, B muncul, bergerak keluar, mengatur timer untuk menunda 0,5s dan kemudian menutup B, jadi Anda perlu menilai saat pindah ke A. Jika ada timer, hapus timer terlebih dahulu dan kemudian tampilkan B.
Ketika pengguna meninggalkan A, yang memicu acara, kartu data div perlu ditunda 0,5 detik sebelum ditutup. Pengguna memiliki cukup waktu untuk melakukan operasi yang sesuai. Ketika mouse pindah ke kartu data B, timer di B yang sebelumnya diatur untuk menutup B.
Kode lengkapnya adalah sebagai berikut:
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> melayang tampilkan b </itement> <script src = "http://code.jquery.com/jquery-1.12.min.js"> </script> <style type = "text/css/css/css; margin: 10px; Lebar: 50px; Tinggi: 50px; Latar Belakang-Color: #CCC; }#msg-box {border: 1px solid black; Lebar: 200px; Tinggi: 150px; Tampilan: Tidak Ada; float: kiri; Padding: 10px} </tyle> </head> <body> <v id = "hook"> a </div> <div id = "msg-box"> Modul fungsi b </div> <script type = "text/javascript"> var timer; $ ("#hook,#msg-box"). bind ("mouseover", showmsgbox); $ ("#hook"). bind ("mouseout", hidemsgbox)); $ ("#msg-box").} ("mouseout", function () {if (timer) {cleartimeout (timer); ever ("} {if {if ifer) {ifer {ifer) {ifer {ifer) {ifer {ifer) {if MSG-BOX"). showmsgbox () {if (timer) {clearTimeOut (timer);} $ ("#msg-box"). show ();} function hidemsgbox () {timer = setTimeout (function () {$ ("#msg-box"). Hide ();}, 500);} </script> </msg-box ").Bagian JS:
<type script = "Text/JavaScript"> var timer; $ ("#hook,#msg-box"). bind ("mouseover", showmsgbox); $ ("#hook"). bind ("mouseout", hidemsgbox); $ ("#msg-box"). bind ("mouseout", function () {ifer {ifer). $("#msg-box").hide(); });function showMsgBox(){ if(timer){clearTimeout(timer);} $("#msg-box").show();} function hideMsgBox(){ timer=setTimeout(function(){ $("#msg-box").hide(); },500);}</script>Hal -hal yang perlu diperhatikan
1. Gunakan mouseover alih -alih mousemove untuk memicu peristiwa.
Mouseover: dipicu ketika mouse bergerak di atas elemen target.
Mousemove: Mouse terus memicu saat bergerak di dalam elemen.
Oleh karena itu, mouseover dan mousemove mengkonsumsi sumber daya.
Untuk informasi lebih lanjut, silakan merujuk ke: http://www.cnblogs.com/starof/p/4106904.html
2. Nyatakan sebelum menelepon timer
Jika tidak dinyatakan, timer tidak akan dinyatakan pertama kali mouse dipindahkan, sehingga kesalahan akan dilaporkan ketika mouse dipindahkan untuk pertama kalinya.
3. Timer harus dibersihkan sebelum memanggil acara mouseover
Jika tidak dibersihkan, B akan ditutup secara otomatis setelah 0,5 -an.
3. Paket ke dalam fungsi universal
Mempertimbangkan bahwa fungsi ini lebih umum, dikemas. Karena JS perlu menangani beberapa masalah kompatibilitas, itu ditulis dalam jQuery.
/*** @description mouse melayang ke ohook untuk menampilkan omsgbox. * @Author Liuxiaoyan* @Date 2016-03-24 15: 01: 13* @Last dimodifikasi oleh: liuxiaoyan* @last Modified Time: 2016-03-24 15:01:13* // *** @param ohook: elemen untuk melayang* @param omsgbox: elemen untuk ditampilkan di Hover* hovershowmsg.init ({hook: $ (". viewphone"), msgbox: $ (". viewphonescan")});*/var hovershowmsg = (function () {var ohook, omsgbox, timer; function init (o) {ohook = o.hook; omsgbox = o.msgbox; ohook.bind ({mouseover: showmsgbox, mouseout: hidemsgbox}); Omsgbox.hide ();}, 500);Di atas adalah konten lengkap tentang cara mencapai efek menampilkan kartu informasi (disarankan) berdasarkan JS berdasarkan qq friend avatar hover. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan. Editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda untuk situs web Wulin.com!