JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果 |
|
本文标签：鼠标经过,资料卡 基于项目的需要，需要制作出如下的一种页面效果：当用户鼠标经过好友列表中好友头像时，显示该好友的基本资料，其实也就是类似QQ客户端的那种功能 。 搜索了好久，终于发现了可行的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>
onmouseover="showInfoCard(this,${friend.friendId})" onmouseout="hideInfoCard(${friend.friendId})"
|
