码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-07-02 09:33:27      阅读:260      评论:0      收藏:0      [点我收藏+]

标签:js   资料卡   div显示和隐藏   jquery   css   

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

bubuko.com,布布扣

       网上找了很多代码,基本都实现了鼠标悬浮之后弹出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代码即可完成显示,最后来张初步的效果图,挺丑的...

bubuko.com,布布扣

(原文地址:http://blog.csdn.net/zhshulin/article/details/36204089)





JS实现鼠标经过用户头像显示资料卡的效果,可点击,布布扣,bubuko.com

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

标签:js   资料卡   div显示和隐藏   jquery   css   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!