1. Anwendungsszenarien
Das DIV taucht den Maus -Schwebe auf und kann nicht unmittelbar nach der Mausblätter versteckt werden, da auf dieser Div auch ein Funktionsportal vorhanden ist. Zum Beispiel:
Der Effekt der Anzeige der Profilkarte, wenn die Maus den Avatar des Freundes in der Freundesliste durchläuft, lautet wie folgt:
Zeigen Sie den QR -Code an, wenn Sie schweben
2. Realisierung
Verwenden Sie einen einfachen Effekt wie diesen: Die Maus schweben Sie, um B auf A zu simulieren
Es gibt zwei Möglichkeiten, es umzusetzen. Der zweite wird empfohlen. Der erste hat seine Nachteile. Ich werde unten darüber sprechen.
1. Methode 1
Prinzip: Legen Sie das Triggerelement A und das angezeigte Element B in das gleiche übergeordnete Element, und die Anzeige B wird ausgelöst, wenn die Maus durch das übergeordnete Element passt. Auf diese Weise wird die Div nicht versteckt, wenn sich die Maus nach B bewegt.
Code:
<! DocType html> <html> <head> <meta charset = "utf-8"/> <title> hover a show b </title> <script src = "http://code.jQuery.com/jquery-1.12.2.min.js"> </script> <style type Rand: 10px 0 10px 10px; Breite: 50px; Höhe: 50px; Hintergrundfarbe: #CCC; }#msg-box {border: 1px solid schwarz; Breite: 200px; Höhe: 150px; Anzeige: Keine; float: links; Padding: 10px} </style> </head> <body> <div id = "Hoverwrap"> <div id = "Hook"> a </div> <div id = "msg-box"> Funktionsmodul B </div> </div> <script type = "text/javaScript"> $ ("#Hoverwrap"). Hover (Funktion () (Funktion () {) {) {) {) {) {) {) (function () (function () (function () (function () (function () (function () (function $ ("#msg-box"). Toggle ();}); </script> </body> </html>Diese Methode ist relativ einfach zu implementieren, erfordert jedoch eine Ebene von übergeordneten Tags und hat einen Nachteil: Die beiden Elemente können nicht verteilt werden.
2. Methode 2
Prinzip: Wenn die Maus A, B erscheint, ein Ausschifft, setzt einen Timer um 0,5 und schließt dann B, sodass Sie beurteilen müssen, wenn Sie in A wechseln, wenn ein Timer vorhanden ist, den Timer zuerst löschen und dann B. anzeigen
Wenn der Benutzer A verlässt, was das Ereignis auslöst, muss die Datenkarten -DIV vor dem Schließen um 0,5 Sekunden verzögert werden. Der Benutzer hat genügend Zeit, um den entsprechenden Vorgang auszuführen. Wenn die Maus in die Datenkarte B einzieht, war der Timer in B, der zuvor zeitlich geplant war, B.
Der vollständige Code lautet wie folgt:
<! DocType html> <html> <head> <meta charset = "utf-8"/> <title> hover a show b </title> <script src = "http://code.jQuery.com/jquery-1.12.2.min.js"> </script> <style type Rand: 10px; Breite: 50px; Höhe: 50px; Hintergrundfarbe: #CCC; }#msg-box {border: 1px solid schwarz; Breite: 200px; Höhe: 150px; Anzeige: Keine; float: links; Padding: 10px} </style> </head> <body> <div id = "Hook"> a </div> <div id = "msg-box"> Funktionsmodul B </div> <script type = "text/javaScript"> var Timer; $ ("#Hook,#msg-box"). Bind ("Mausover", ShowMSGBox); $ ("#Hook"). Bind ("Mausout", Hidemsgbox); $ ("#msg-box). Bind (" Mouseout ", Funktion () {if (Timer) {ClearTimeout (Timer); ShowMSGBox () {if (Timer) {ClearTimeOut (Timer);} $ ("#msg-box"). show ();} function hidemsgbox () {Timer = setTimeout (function () {$ ("#msg-box").JS Teil:
<script type = "text/javaScript"> var timer; $ ("#Hook,#msg-box"). Bind ("mouseover", showsgbox); $ ("#msg-box"). hide ();Dinge zu beachten
1. Verwenden Sie Mausover anstelle von Mousemove, um Ereignisse auszulösen.
Mausover: Ausgelöst, wenn sich die Maus über das Zielelement bewegt.
Mousemove: Die Maus löst immer wieder aus, wenn sie sich im Element bewegen.
Daher konsumieren Mausover und Mousemove Ressourcen.
Weitere Informationen finden Sie unter: http://www.cnblogs.com/starof/p/4106904.html
2. Erklären Sie es, bevor Sie Timer anrufen
Wenn nicht deklariert, wird der Timer nicht erklärt, wenn die Maus zum ersten Mal ausgestrahlt wird. Daher wird ein Fehler gemeldet, wenn die Maus zum ersten Mal eingezogen wird.
3. Der Timer muss gelöscht werden
Wenn nicht gelöscht, wird B nach 0,5 automatisch geschlossen.
3.. Paket in eine universelle Funktion
In Anbetracht der Tatsache, dass diese Funktion allgemeiner ist, ist sie verpackt. Da JS mit einigen Kompatibilitätsproblemen zu tun hat, ist es in JQuery geschrieben.
/*** @Description Maus schweben nach Ohok, um OMSGBox anzuzeigen. * @Author liuxiaoyan* @date 2016-03-24 15: 01: 13* @last geändert durch: liuxiaoyan* @last modifizierte Zeit: 2016-03-24 15:01:13* // *** @param ohok: Elemente zu heilen* @param omsgbox: Elemente, um auf HOver* Call-Beispiel anzeigen zu werden: Auf HOVER-CALLEMBILDE: Hovershowsg.init ({Hook: $ (". Viewphone"), msgbox: $ (". ViewPhonescan")});*/var hovershowsg = (function () {var ohok, omsgbox, Timer; Funktion init (o) {ohook = o.hook; omsgbox = O.msgbox; BindEnt (); ohook.bind ({Mausover: ShowMSGBox, Mausout: HIDEMSGBOX}); omsgbox.hide ();Das obige ist der vollständige Inhalt der Erreichung der Auswirkung der Anzeige von Informationskarten (empfohlen) basierend auf JS basierend auf dem QQ -Freund Avatar Hover. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht. Der Herausgeber wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung für die Website von Wulin.com!