JS实现鼠标经过用户头像显示资料卡的效果，可点击

基于项目的须要。须要制作出例如以下的一种页面效果：当用户鼠标经过好友列表中好友头像时，显示该好友的基本资料。事实上也就是类似QQclient的那种功能。



网上找了非常多代码，基本都实现了鼠标悬浮之后弹出div，离开之后立即就消失了。还有些纯CSS的代码实现了这种效果，可是对我没用，我须要的是JS的（由于我的数据还要通过Ajax取得），而且鼠标离开后不能立即隐藏。这个div上还有功能入口。这个页面效果折腾了我一天。由此可见我的JS和CSS技术有待提高...

搜索了好久，最终发现了可行的2个思路例如以下。这2个方法有个样例，不是我写的。我也没用到，转过来分享一下。

下载地址。我的方法參考了方法B的思路。

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

方法A：

把浮动div和触发元素a放于同一个父级的元素中内，鼠标经过父级的元素中时触发显示。这样鼠标移动到div时仍然 处于该父级的元素中内，则div不会隐藏。

方法B：

鼠标经过a时弹出div，鼠标离开a时设置一个计时器用来关闭div，假设鼠标移动到div后则清除计时器。

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

我这种方法就是採用了上面方法B的思想，当用户离开触发事件的图像后，资料卡div要延时3秒才后关闭。用户拥有足够的时间进行对应的操作。当用户点击其它好友图像时，则会立马调用hidden方法。将之前的打开正在计时的div关闭。

以下给出我的方法的JS代码：

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

以下是HTML中的隐藏的div代码片段：

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

在HTML中。须要调用showInfoCard和hideInfoCard方法。使用下面语句监听鼠标事件：

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

这些都是动态的代码片段，採用的时候须要引入jquery.js框架。当然也能够改动成纯JS的。上面的完毕了。AJAX取得信息，然后利用JS在上面div中插入HTML代码就可以完毕显示，最后来张初步的效果图，挺丑的...



（原文地址：http://blog.csdn.net/zhshulin/article/details/36204089）