JS implementiert den Effekt der Anzeige der Datenkarte, wenn die Maus über den Avatar des Freundes in den Fähigkeiten „friend list_javascript“ fährt

Basierend auf den Anforderungen des Projekts muss der folgende Seiteneffekt erstellt werden: Wenn die Maus des Benutzers über den Avatar des Freundes in der Freundesliste fährt, werden die grundlegenden Informationen des Freundes angezeigt, was eigentlich einer ähnlichen Funktion entspricht an den QQ-Client.

Ich habe viele Codes im Internet gefunden, und sie erkennen im Grunde, dass das Div angezeigt wird, nachdem die Maus darüber geführt wird, und sofort verschwindet, wenn es verlassen wird. Es gibt auch einige reine CSS-Codes, die diesen Effekt erzielen, aber sie sind für mich nutzlos (da meine Daten über Ajax abgerufen werden müssen) und können nicht sofort nach dem Verlassen der Maus ausgeblendet werden auf dieser div. Eingang. Die Wirkung dieser Seite hat mich einen ganzen Tag gekostet, was zeigt, dass meine JS- und CSS-Kenntnisse verbessert werden müssen...

Nach langer Suche habe ich endlich zwei praktikable Ideen gefunden, die nicht von mir geschrieben wurden und die ich hier nicht teilen möchte >Demo-Adresse. Meine Methode bezieht sich auf die Idee der Methode B.

Methode A:

Platzieren Sie das schwebende Div und das Triggerelement a im selben übergeordneten Element und lösen Sie die Anzeige aus, wenn die Maus über das übergeordnete Element fährt. Auf diese Weise befindet sich die Maus beim Bewegen zum Div immer noch innerhalb des übergeordneten Elements und das Div wird nicht ausgeblendet.

Methode B:

Wenn die Maus a passiert, erscheint das Div. Wenn die Maus a verlässt, stellen Sie einen Timer ein, um das Div zu schließen. Wenn sich die Maus zum Div bewegt, wird der Timer gelöscht.

———————————————————————————————————————————— ———— —————————————————————

Meine Methode basiert auf der Idee der oben genannten Methode B. Wenn der Benutzer das Bild verlässt, das das Ereignis ausgelöst hat, wird die Datenkarten-Div nach einer Verzögerung von 3 Sekunden geschlossen Wenn der Benutzer auf ein anderes Freundbild klickt, wird die versteckte Methode sofort aufgerufen, um das zuvor geöffnete Div zu schließen.

Der JS-Code meiner Methode ist unten angegeben:

//显示资料卡 
var beforeId; //定义全局变量 
function showInfoCard(thisObj,id){ 
this.hidden(beforeId); //立刻隐藏前一个选中弹出来的div 
beforeId = id; 
// alert(id); 
// var d = $(thisObj); 
// var pos = d.offset(); 
// var t = pos.top + d.height() - 5; // 弹出框的上边位置 
// var l = pos.left - d.width() - 600; // 弹出框的左边位置 
// $("#"+id).css({ "top": t, "left": l }).show(); 
// 

var objDiv = $("#"+id); 

$(objDiv).css("display","block"); 

$(objDiv).css("left", event.clientX-280); //弹出框的位置X值 

$(objDiv).css("top", event.clientY-10); //弹出框位置Y值 
} 
function hideInfoCard(id){ //隐藏div 
//延时3秒 
setTimeout('hidden('+id+')',3000); 
} 

function hidden(id){ 
$("#"+id).hide(); 
}

Hier ist das versteckte Div-Code-Snippet in HTML:

<div id="id" style="display:none; width:250px; height:150px; background-color:#D1EEEE;position:absolute;"></div>

In HTML müssen Sie die Methoden showInfoCard und hideInfoCard aufrufen und die folgenden Anweisungen verwenden, um auf Mausereignisse zu warten:

onmouseover="showInfoCard(this,'${friend.friendId}')" onmouseout="hideInfoCard('${friend.friendId}')" 

Dies sind dynamische Codefragmente. Wenn Sie sie verwenden, müssen Sie das jquery.js-Framework einführen. Natürlich können sie auch in reines JS geändert werden. Das Obige ist abgeschlossen, AJAX ruft die Informationen ab und fügt dann mithilfe von JS den HTML-Code in das obige Div ein, um die Anzeige abzuschließen. Hier ist schließlich ein vorläufiges Rendering, das ziemlich hässlich ist ...