JS implémente l'effet d'afficher la carte de données lorsque la souris passe sur l'avatar de l'ami dans les compétences Friend list_javascript

En fonction des besoins du projet, il est nécessaire de créer l'effet de page suivant : lorsque la souris de l'utilisateur passe sur l'avatar de l'ami dans la liste d'amis, les informations de base de l'ami sont affichées, ce qui est en fait une fonction similaire au client QQ.

J'ai trouvé beaucoup de codes sur Internet, et ils se rendent compte en gros que le div apparaîtra après le survol de la souris et qu'il disparaîtra immédiatement après l'avoir quitté. Il existe également des codes CSS purs qui obtiennent cet effet, mais ils me sont inutiles. Ce dont j'ai besoin, c'est de JS (car mes données doivent être obtenues via Ajax), et elles ne peuvent pas être masquées immédiatement après le départ de la souris. sur cette div. Entrée. L'effet de cette page m'a pris une journée entière, ce qui montre que mes compétences JS et CSS sont à améliorer...

Après avoir longtemps cherché, j'ai finalement trouvé deux idées réalisables comme suit. Il existe des exemples de ces deux méthodes. Elles n'ont pas été écrites par moi et je ne les ai pas utilisées, je voudrais les partager ici, Adresse de démonstration. Ma méthode fait référence à l'idée de la méthode B.

Méthode A :

Placez le div flottant et l'élément déclencheur a dans le même élément parent, et déclenchez l'affichage lorsque la souris passe sur l'élément parent. De cette façon, lorsque la souris se déplace vers le div, celui-ci se trouve toujours dans l'élément parent et le div ne sera pas masqué.

Méthode B :

Lorsque la souris passe a, le div apparaît. Lorsque la souris quitte a, réglez une minuterie pour fermer le div. Si la souris se déplace vers le div, la minuterie est effacée.

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

Ma méthode est basée sur l'idée de la méthode B ci-dessus. Lorsque l'utilisateur quitte l'image qui a déclenché l'événement, la div de la carte de données sera fermée après un délai de 3 secondes. L'utilisateur a suffisamment de temps pour effectuer l'événement. opération correspondante.Lorsque l'utilisateur clique sur un autre Lorsque l'image de l'ami est affichée, la méthode cachée sera immédiatement appelée pour fermer le div précédemment ouvert et chronométré.

Le code JS de ma méthode est donné ci-dessous :

//显示资料卡 
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(); 
}

Voici l'extrait de code div caché en HTML :

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

En HTML, vous devez appeler les méthodes showInfoCard et hideInfoCard et utiliser les instructions suivantes pour écouter les événements de la souris :

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

Ce sont des extraits de code dynamiques. Lorsque vous les utilisez, vous devez introduire le framework jquery.js. Bien sûr, ils peuvent également être modifiés en JS pur. Ce qui précède est terminé, AJAX obtient les informations, puis utilise JS pour insérer le code HTML dans le div ci-dessus pour terminer l'affichage. Enfin, voici un rendu préliminaire, qui est assez moche...
.