1. Scénarios d'application
La div apparaît sur le plan de la souris et ne peut pas être cachée immédiatement après le départ de la souris, car il y a aussi un portail de fonction sur cette div. Par exemple:
L'effet de l'affichage de la carte de profil lorsque la souris passe par l'avatar de l'ami dans la liste des amis est la suivante:
Afficher le code QR lors de la volonté
2. Réalisation
Utilisez un effet simple comme celui-ci: la souris survole pour afficher B sur A pour simuler
Il existe deux façons de l'implémenter. Le second est recommandé. Le premier a ses inconvénients. J'en parlerai ci-dessous.
1. Méthode 1
Principe: Mettez l'élément de déclenchement A et l'élément affiché B dans le même élément parent, et l'affichage B est déclenché lorsque la souris passe par l'élément parent. De cette façon, lorsque la souris se déplace vers B, la div ne sera pas cachée.
Code:
<! Doctype html> <html> <éadf> <meta charset = "utf-8" /> <tight> hover a show b </ title> <script src = "http://code.jquery.com/jquery-1.12.2.min.js"> </cript> <style type = "text / css"> # hook {float: floate: floate: gauche; marge: 10px 0 10px 10px; Largeur: 50px; hauteur: 50px; Color d'arrière-plan: #ccc; } # msg-box {border: 1px solide noir; Largeur: 200px; hauteur: 150px; Affichage: aucun; flottant: à gauche; padding: 10px} </ style> </ad> <body> <div id = "hoverwrap"> <div id = "hook"> a </v> <div id = "msg-box"> module de fonction b </v> </v> <script type = "text / javascript"> $ ("# hoverwrap"). hover (function () {{ $ ("# msg-box"). toggle ();}); </cript> </ body> </html>Cette méthode est relativement simple à mettre en œuvre, mais elle nécessite d'envelopper une couche de balises parentales et a un inconvénient: les deux éléments ne peuvent pas être espacés.
2. Méthode 2
Principe: Lorsque la souris passe A, B apparaît, déplace A, définit une minuterie pour retarder de 0,5 s, puis ferme B, vous devez donc juger lorsque vous vous déplacez dans A. s'il y a une minuterie, effacez d'abord la minuterie, puis affichez B.
Lorsque l'utilisateur quitte A, qui déclenche l'événement, la carte de données DIV doit être retardée de 0,5 seconde avant la fermeture. L'utilisateur a suffisamment de temps pour effectuer l'opération correspondante. Lorsque la souris se déplace dans la carte de données B, la minuterie en B qui était auparavant chronométrée pour fermer B.
Le code complet est le suivant:
<! Doctype html> <html> <éadf> <meta charset = "utf-8" /> <tight> hover a show b </ title> <script src = "http://code.jquery.com/jquery-1.12.2.min.js"> </cript> <style type = "text / css"> # hook {float: floate: floate: gauche; marge: 10px; Largeur: 50px; hauteur: 50px; Color d'arrière-plan: #ccc; } # msg-box {border: 1px solide noir; Largeur: 200px; hauteur: 150px; Affichage: aucun; flottant: à gauche; Padding: 10px} </ style> </ head> <body> <div id = "hook"> a </div> <div id = "msg-box"> module de fonction b </div> <script type = "text / javascript"> var Timer; $ ("# hook, # msg-box"). bind ("MouseOver", showmsgbox); $ ("# hook"). bind ("sourisout", hidemsgbox); $ ("# msg-box"). bind ("mouseout", function () {if (timer) {cleartimeout (timer);} $ ("# msg-box"). showmsgbox () {if (timer) {cleartimeout (timer);} $ ("# msg-box"). show ();} fonction hidemsgbox () {timer = setTimeout (function () {$ ("# msg-box"). hide ();}, 500);} </script>JS Partie:
<script type = "text / javascript"> var timer; $ ("# hook, # msg-box"). lis ("muouseOver", showmsgbox); $ ("# hook"). bind ("muouseout", hidemsgbox); $ ("# msg-box"). Bind ("Mouseout); $ ("# msg-box"). hide ();}); fonction showmsgbox () {if (timer) {cleartimeout (timer);} $ ("# msg-box").Choses à noter
1. Utilisez Mouseover au lieu de MouseMove pour déclencher des événements.
MouseOver: déclenché lorsque la souris se déplace sur l'élément cible.
MOUSEMOVE: La souris continue de déclencher lors du passage à l'intérieur de l'élément.
Par conséquent, Mouseover et Mousemove consomment des ressources.
Pour plus d'informations, veuillez vous référer à: http://www.cnblogs.com/starof/p/4106904.html
2. Déclarez-le avant d'appeler la minuterie
Si elle n'est pas déclarée, la minuterie ne sera pas déclarée la première fois que la souris est déplacée, donc une erreur sera signalée lorsque la souris sera déplacée pour la première fois.
3. La minuterie doit être effacée avant d'appeler l'événement Mouseover
S'il n'est pas effacé, B sera automatiquement fermé après 0,5 s.
3. Package dans une fonction universelle
Étant donné que cette fonction est plus générale, elle est emballée. Parce que JS doit faire face à certains problèmes de compatibilité, il est écrit en jQuery.
/ *** @description souris survole pour ohook pour afficher omsgbox. * @Author liuxiaoyan * @Date 2016-03-24 15: 01: 13 * @Last Modified by: liuxiaoyan * @Last Modified Time: 2016-03-24 15:01:13 * // *** @param ohook: Elements to Hover * @param omsgbox: éléments à afficher sur le casier * Exemple d'appel: hoverShowmsg.init ({hook: $ (". Viewphone"), msgbox: $ (". Viewphonescan")}); * / var hoverShowmsg = (function () {var ohook, omsgbox, tempor ohook.bind ({MouseOver: showmsgbox, muouseout: hidemsgbox}); omsgbox.bind ({mouseOver: showmsgbox, muouseout: function () {if (timer) {cleartimeout (timer);} omsgbox.hide ();}}); OMSGBOX.HIDE ();}, 500);} Fonction ShowMsgbox () {if (timerCe qui précède est le contenu complet de la façon d'atteindre l'effet de l'affichage des cartes d'information (recommandée) basée sur JS basée sur le QQ Friend Avatar survol. J'espère que ce sera utile à tout le monde. Si vous avez des questions, laissez-moi un message. L'éditeur vous répondra à temps. Merci beaucoup pour votre soutien pour le site Web de Wulin.com!