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

约定不等于承诺〃 2022-08-24 08:36 177阅读 0赞

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

![SouthEast][]

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

搜索了好久，终于发现了可行的2个思路如下，这2个方法有个例子，不是我写的，我也没用到，转过来分享一下。[下载地址][Link 1]。我的方法参考了方法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代码片段：

在HTML中，需要调用showInfoCard和hideInfoCard方法，使用以下语句监听鼠标事件：

οnmοuseοver="showInfoCard(this,'${friend.friendId}')" οnmοuseοut="hideInfoCard('${friend.friendId}')"

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

![SouthEast 1][]

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

[SouthEast]: /images/20220823/7e5d90ec9a2c47f281344747b7ddab3c.png
[Link 1]: http://download.csdn.net/detail/u012909091/7578747
[SouthEast 1]: /images/20220823/026721ba455949ea8a59e38eb8563afc.png