Basierend auf den Anforderungen des Projekts muss der folgende Seiteneffekt erstellt werden: Wenn der Benutzer den Avatar des Freundes in der Liste des Freundes übergibt, werden die grundlegenden Informationen des Freundes angezeigt, was tatsächlich eine Funktion ist, die der des QQ -Clients ähnelt.
Ich fand viele Codes online und im Grunde genommen wurden alle festgestellt, dass die Maus suspendiert und die DIV aufgetaucht war und dann sofort nach dem Verlassen verschwunden war. Es gibt auch einige reine CSS -Codes, die diesen Effekt erzielen, aber sie sind für mich nutzlos. Was ich brauche, ist JS (weil meine Daten über Ajax erhalten werden müssen) und die Maus kann nicht unmittelbar nach der Abreise versteckt werden. Es gibt auch einen Funktionseintrag für diese DIV. Dieser Seiteneffekt hat mich für einen Tag geworfen, was zeigt, dass meine JS- und CSS -Technologien verbessert werden müssen ...
Nachdem ich lange gesucht hatte, fand ich schließlich zwei machbare Ideen wie folgt. Es gibt ein Beispiel für diese beiden Methoden. Ich habe sie nicht geschrieben und habe sie auch nicht benutzt. Lassen Sie uns sie teilen und die Demo -Adresse wird angezeigt. Meine Methode bezieht sich auf die Idee der Methode B.
Methode a:
Legen Sie das schwimmende Div und Triggerelement A in das gleiche übergeordnete Element und lösen Sie die Anzeige aus, wenn die Maus durch das übergeordnete Element verläuft. Auf diese Weise befindet sich die Maus, wenn sie sich zum Div bewegt, immer noch im übergeordneten Element, und das Div wird nicht versteckt.
Methode B:
Das Div taucht auf, wenn die Maus a. Wenn die Maus A verlässt, wird ein Timer so eingestellt, dass das Div ausgeschaltet wird. Wenn sich die Maus zum Div bewegt, wird der Timer gelöscht.
»~ Up
Meine Methode übernimmt die Idee von Methode B oben. Wenn der Benutzer das Bild verlässt, das das Ereignis auslöst, muss die Datenkarten -DIV um 3 Sekunden verzögert werden, bevor es geschlossen wird. Der Benutzer hat genügend Zeit, um den entsprechenden Vorgang auszuführen. Wenn der Benutzer auf andere Freundesbilder klickt, wird die versteckte Methode sofort aufgerufen, um die vorherige Öffnungs- und Timing -Div zu schließen.
Hier ist der JS -Code für meine Methode:
// Zeigen Sie die Datenkarte VAR vor der ID an. // Definieren Sie die globale Variablenfunktion ShowInfocard (thisoBJ, id) {this.hidden (vorId); // Verstecke sofort den vorherigen ausgewählten Div vorid = id; // alarm (id); // var d = $ (thisoBJ); // var pos = d.Offset (); // var t = pos.top + d.height () - 5; // die obere Position der Popup -Box // var l = pos.left - d.width () - 600; // die linke Position des Popup-Box // $ ("#"+id) .css ({"top": t, "links": l}). Show (); // var objdiv = $ ("#"+id); $ (objdiv) .css ("display", "block"); $ (objdiv) .css ("links", event.clientx-280); // Der X-Wert des Popup-Box ist $ (objdiv) .css ("top", Event.clienty-10); // Der y-Wert des Popup-Felds ist y-Wert} Funktion hideInfocard (id) {// div // Delcone für 3 Sekunden SetTimeout ('Hidden ('+id+')', 3000); } Funktion versteckt (id) {$ ("#"+id) .hide (); }Hier ist ein versteckter Div -Code -Ausschnitt in HTML:
<div id = "id" style = "display: keine; width: 250px; Höhe: 150px; Hintergrundfarbe:#d1eeee; Position: absolut;"> </div>
In HTML müssen Sie die ShowInfocard- und HideInfocard -Methoden aufrufen und mit der folgenden Anweisung auf Mausereignisse anhören:
onmouseover = "showInfocard (this, '$ {Freund.FriendID}')" onmouseout = "hideInfocard ('$ {Freund.friendID}')"Dies sind dynamische Code -Snippets. Wenn Sie es verwenden, müssen Sie das Framework von Jquery.js vorstellen, und es kann natürlich auch in reine JS modifiziert werden. Das obige ist abgeschlossen. Ajax erhält die Informationen und verwendet dann JS, um den HTML -Code in die obige DIV einzugeben, um die Anzeige zu vervollständigen. Schließlich habe ich eine vorläufige Darstellung, die ziemlich hässlich ist ...