如何实现像CSDN上那样,当鼠标移到用户头像上时,会出现用户的详细信息？

<a target="_blank" href="http://hi.csdn.net/Tulipfly" onmouseover="javascript:showUserCard(event);">
<img alt="" src="/u/ui/images/blank.gif" class="userstatus" style="background-image:url(http://webim.csdn.net/UserOnlineFace/Theme1/Tulipfly.ashx)" /><var id="topicUserName" csdnid="username">Tulipfly</var></a>
onmouseover="javascript:showUserCard(event);

具体实现的JS代码是什么呢？就是实现弹出对话框的JS代码，能否告诉我一下，谢谢了

思路是很多种的。同时也可以用alt！

你查看下本页的html源..看看可不可以把他的js搞下来

这个是我之前做日历控件的时候用到的，效果跟CSDN的一样，只是要改下样式
<html>
<head>
<style>
.calendar_Layer_tablebg {
background-color: #bc8e41;
}
.calendar_Layer_tablein {
background-color: #FFFFFF;
}
</style>
<script language='javascript' type="text/javascript">
var show=0;function get_pos_x(obj)
{
var x=obj.offsetLeft;
while(obj.offsetParent){
obj=obj.offsetParent;
x+=obj.offsetLeft;
}
return x;
}
function get_pos_y(obj)
{
var y=obj.offsetTop;
while(obj.offsetParent){
obj=obj.offsetParent;
y+=obj.offsetTop;
}
return y;
}
function show_img(obj,edate)
{
show++;
if(!obj) return;
var div_obj=document.getElementById('contents');
if( 1==1 ) {
//alert(get_pos_x(obj));
div_obj.innerHTML="<table cellpadding=\"1\" cellspacing=\"1\" class=\"calendar_Layer_tablebg\"><tr><td class=\"calendar_Layer_txt1\">" + edate + "</td></tr><tr><td class='calendar_Layer_tablein'>" + edate + "</td></tr></table>";
div_obj.style.left=get_pos_x(obj)+5; //x;
div_obj.style.top=get_pos_y(obj)+15; //y;
div_obj.style.display="inline";
}else div_obj.style.display="none";
}
function hide_img()
{
if(--show>0) return;
var div_obj=document.getElementById('contents');
div_obj.style.display='none';
}
</script>
</head>
<body>
<div class="calendar_Layer" id="contents" style="position:absolute;display:none" onmouseover="show_img()" onmouseout="window.setTimeout('hide_img()',5)"></div><table width="50%">
<tr>
<td ><a href='' onmouseover="show_img(this,'2007-1-1')" onmouseout="window.setTimeout('hide_img()',5)" >用户1</a></td>
</tr><tr><td height='20'> </td></tr><tr>
<td ><a href='' onmouseover="show_img(this,'2007-1-5')" onmouseout="window.setTimeout('hide_img()',5)" >用户2</a></td>
</tr>
</table>
</body>
</html>

ajax
或
js+层都可以实现。
方法有很多种了，不过都是基于服务端和客户端两种方法的扩展。

function showUserCard(e, user)
{
    e = window.event||e; e.cancelBubble=true;
    var img = e.srcElement || e.target;
    var user = img.parentNode.children; if(user.length<2) return;
    var user = user[1].innerHTML.trim();if(!user) return;
    MzElement.show("UserCard_layer");
}
<a target="_blank" href="http://hi.csdn.net/renyu732" onmouseover="javascript:showUserCard();"><img alt="" src="/u/ui/images/blank.gif" class="userstatus"><var csdnid="Reply_Username">renyu732</var></a>原来我也问过这个问题~别个给的答案~

同意9楼的
建议把JS代码独立写在一个JS文件中，用DIV显示，在onmouseover()事件中调用

他那里面是很多JS文件镶套调用的，本来对JS也就不怎么懂，看的头晕。。

他那个JS我也下下来了，可是看的不怎么明白，思路跟我的好像不太一样，看的很累，并且JS老是提示少属性啊，什么的。。

<a target="_blank" href="http://hi.csdn.net/renyu732" onmouseover="javascript:showUserCard();"><img alt="" src="/u/ui/images/blank.gif" class="userstatus"><var csdnid="Reply_Username">renyu732</var></a>    e = window.event||e; e.cancelBubble=true;
    var img = e.srcElement || e.target;
//获取鼠标当前的标签元素也就是HTML代码中的<img alt="" src="/u/ui/images/blank.gif" class="userstatus">
    var user = img.parentNode.children; if(user.length<2) return;
//取得父节点的子节点元素组<a><img></img><var></var></a>
    var user = user[1].innerHTML.trim();if(!user) return;
//取得元素组中的第二个元素,也就是<var csdnid="Reply_Username">renyu732</var>中的innerHTML renyu732
这个是用户的唯一性标志了~相当于获取到了用户ID了
    MzElement.show("UserCard_layer");//显示图层,细节我不清楚了,可能是AJAX实现

就是MzElement.show("UserCard_layer")到这句，我觉得最关键的地方，但他不知道写哪里去了，show这个函数。
非常感谢帮我说的这么详细。

MzElement.show("UserCard_layer")
具体CSDN是咋实现的~我不知道~
我说说我的想法~
UserCard_layer应该是个DIV,MzElement.show("UserCard_layer")将它设置为可见
然后用AJAX根据获得的用户ID去调取用户的信息function showUserCard(e, user)
{
    e = window.event||e; e.cancelBubble=true;
    var img = e.srcElement || e.target;
    var user = img.parentNode.children; if(user.length<2) return;
    var user = user[1].innerHTML.trim();if(!user) return;
    MzElement.show("UserCard_layer");    var layer=MzElement.check("UserCard_layer");
    var xy = MzElement.realOffset(img);
    layer.style.left = (xy.x + img.offsetWidth - 8) +"px";
    layer.style.top  = (xy.y) +"px";    var left = "<a target='_blank' href='http://hi.csdn.net/{0}/'><img alt='' class='face' src='http://profile.csdn.net/{0}/picture/2.jpg' /></a><br/>"
        +"<a href='http://hi.csdn.net/{0}/' target='_blank'>\u4e2a\u4eba\u7a7a\u95f4</a><br/>"
        +"<a href='http://webim.csdn.net/AddFriends/"+user+".ashx' target='_blank' ><img alt='add friend' class='addFriend' src='"+ System.resourcePath +"/blank.gif' /></a><br/>"
        +"<a href='http://webim.csdn.net/Messages/"+user+".ashx' target='_blank'><img alt='send message' class='sendIMMsg' src='"+ System.resourcePath +"/blank.gif' /></a><br/>"
        +"<a href='http://blog.csdn.net/{0}/' target='_blank'><img alt='blog' class='goBlog' src='"+ System.resourcePath +"/blank.gif' /></a><br/>"
        +"<a href=''>"
    MzElement.check("UserCard_left").innerHTML = left.format(user);    var right = "<span>\u5e10\u53f7\uff1a</span><a target='_blank' href='http://hi.csdn.net/{0}/'><var>{0}</var></a><br/>"+  //username
        "<img src='http://counter.csdn.net/pv.aspx?id=241' border='0' style='display:none'/>"+ //counter
        "<span>\u6635\u79f0\uff1a</span><a target='_blank' href='http://hi.csdn.net/{0}/'><var id='UserCard_nickname'></var></a><br/>"+ //nickname
        "<span>\u6700\u65b0\u5e16\u5b50\uff1a</span><br/><span id='UserCard_topiclist'></span>"+ //last topic
        "<span style='margin-left:90px'><a href='http://forum.csdn.net/PointForum/Forum/UserTopicList.aspx?type=TopicUserRewarded&user={0}'>\u66f4\u591a\u5e16\u5b50...</a></span>"
    MzElement.check("UserCard_right").innerHTML = right.format(user);    if(typeof(showUserCard.database[user])=="undefined")
    {
        MzJson.request(MzElement.check("hf_cardUrl").value + user);
    }
    else bindData(user);
}
俺给你找出来了~

http://topic.csdn.net/u/ui/scripts/Csdn/Forum/UserOnline.js
JS你得自己下下来慢慢看了~感觉挺多的~

shiyo使用Ajax 就很容易实现了

QUOTE:TO22楼，您的方法在火狐下不行，我试过了，请问题如何解决兼容问题？谢谢！！！
--------------------------
一看就知道不行了//　　           var   xmlHttp   =   new   ActiveXObject("MSXML2.XMLHTTP");
改为
var xmlHttp;
if(window.ActiveXObject) xmlHttp   =   new   ActiveXObject("MSXML2.XMLHTTP");
else xmlHttp   =   new   XMLHttpRequest();

    var isIe=navigator.appName.indexOf("Microsoft")!=-1?true:false;
        oDiv.style.top=isIe?(event.clientY-6)+"px":(e.pageY-6)+"px";
        var iLeft=isIe?(event.clientX-6):(e.pageX-6);
        oDiv.style.left=iLeft+"px";
============================================
LikeCode大哥，你昨晚提供的这个方法有一个问题，就是当页面不处在顶部，即往下拉动页面后，鼠标的真实位置和代码得到的鼠标位置有一个是相对的位置，有一个是绝对的位置，层的显示位置就变乱了
============================================
现在改用了9楼的方法，但是在火狐下又不兼容。22楼的问题在您的指点下已经得到解决了^V^

22,30楼赞一个，
帮你把问题拆分一下：
1：客户端与服务器端的通讯。方法有很多种:AJAX组件、js调用WebService,或者实现ICallbackEventHandler接口
2：js控制层的显示与隐藏.这个很简单
Hardcoding:
1:DEMO
加在Page_Load里
String cbReference = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context", "ClientErrorCallback",false);
        String callbackScript = "function CallServer(arg, context) {" + cbReference + "; }";
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"CallServer", callbackScript, true);
具体解释可以参照MSDN实现ICallbackEventHandler接口的方法，这里你需要访问数据库，结果以string 形式返回客户端处理
  #region 客户端回调
    public void RaiseCallbackEvent(string eventArgument)
    {
        try
        {
            string UserID = string.Empty;
            string Area = string.Empty;
            string AccountState = string.Empty;
            UserID = eventArgument;
            model = bll.GetModel(int.Parse(UserID),0);
            if (!string.IsNullOrEmpty(model.AreaCode))
            {
                tempds = cbll.GetList(10, 1, "Code ='" + model.AreaCode + "' ");
                Area = tempds.Tables[0].Rows[0]["Name"].ToString();
            }
            returnValue = model.LoginName + ',' + model.Email + ',' + model.Phone + ',' + model.Score + ',' + Area + ',' + model.RegisterTime;
        }
        catch (Exception e)
        {
            Response.Write(e.Message.ToString());
        }

}
    public string GetCallbackResult()
    {
        return returnValue;
    }
   #endregion
客户端JS function ReceiveServerData(rvalue,context)//客户端回调函数，处理数据库查询结果字符串
    {
        var Info=new Array();
        Info=rvalue.split(',');
        oDiv.innerHTML="<table  width='150' height='100' padding=0 margin=0 bgcolor='#cccccc' border='1'cellpadding='0' cellspacing='1' bordercolorlight='#CCCCCC' bordercolordark='#ffffff'><tr><td align='right' ><font color='red'>用户</font></td><td align='left'><font color='red'> "+Info[0]+"</font></td></tr><tr><td align='right'><font color='red'>EMail</font></td><td align='left' nowrap><font color='red'> "+Info[1]+"</font></td></tr><tr><td align='right' nowrap><font color='red'>联系方式</font></td><td align='left'><font color='red'> "+Info[2]+"</font></td></tr><tr><td align='right'><font color='red'>积分</font></td><td align='left'><font color='red'> "+Info[3]+"</font></td></tr><tr><td align='right'><font color='red'>地区</font></td><td align='left'><font color='red'> "+Info[4]+"</font></td></tr><tr><td align='right'><font color='red'>注册时间</font></td><td align='left' nowrap><font color='red'> "+Info[5]+"</font></td></tr></table>";    }        function ClientErrorCallback( error, context )
    {
       alert("The validation failed. " + error);
    }  function LookUpInfo(obj)    {//onmouseover触发
        var div = obj;
        var UserID = div.title;
        var oDiv=document.getElementById("oDiv");
        oDiv.style.display="";
        oDiv.style.left= window.event.x + document.body.scrollLeft;
        oDiv.style.top= window.event.y + document.body.scrollTop;
        CallServer(UserID, "");//请求服务端处理
    }2层的控制
  function hidden()//层的显示与隐藏
    {
        var oDiv=document.getElementById("oDiv");
        oDiv.style.display="none";
    }需要添加以下层用于显示数据<div id="oDiv" class="block"></div> 绝对原创，测试通过

oDiv.style.left= window.event.x + document.body.scrollLeft;
oDiv.style.top= window.event.y + document.body.scrollTop;

QUOTE:LikeCode大哥，你昨晚提供的这个方法有一个问题，就是当页面不处在顶部，即往下拉动页面后，鼠标的真实位置和代码得到的鼠标位置有一个是相对的位置，有一个是绝对的位置，层的显示位置就变乱了
-----------------
不好意思,当时代码没有考虑到IE的一个不同.
你开个新贴,我回答你怎么做,嘿嘿~~~~

靠,35抢偶的饭碗.
算了,我说.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default7.aspx.cs" Inherits="Default7" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <div style="float:left;width:500px;border:solid 1px red">dddddd</div><a href="#" onmousemove="setPosition(event,true)" onmouseout="setPosition('',false)">link 1</a><br />
    <a href="#" onmousemove="setPosition(event,true)" onmouseout="setPosition('',false)">link 2</a><br />
    <a href="#" onmousemove="setPosition(event,true)" onmouseout="setPosition('',false)">link 3</a><br />
    <div style="position:absolute;width:100px;height:100px;border:solid 1px red;top:100px;left:100px;display:none;background:#fff" id="div1">i'm here.</div>
    </div>
    </form>
    <script type="text/javascript">
    function setPosition(e,isShow){
        var oDiv=document.getElementById("div1");
        if(isShow){
    //为了简单起见,脚本只判断IE与非IE,不多种浏览器之间,可能会有兼容问题,你可以自己完善代码,但是有小小的代价
        var isIe=navigator.appName.indexOf("Microsoft")!=-1?true:false;
        var ieBody;
        if(isIe)
            ieBody=(document.compatMode && document.compatMode!="BackCompat")?document.documentElement:document.body;
        oDiv.style.top=isIe?event.clientY+ieBody.scrollTop+"px":e.pageY+"px";
        var iLeft=isIe?event.clientX+ieBody.scrollLeft:e.pageX;
        iLeft+=12;
        oDiv.style.left=iLeft+"px";
        if(isShow) oDiv.style.display="";
    }
    else
        oDiv.style.display="none";
    }
    </script>
</body>
</html>

oDiv.style.left= window.event.x + document.body.scrollLeft;
oDiv.style.top= window.event.y + document.body.scrollTop;
==============================
这个方法有一个问题，就是当页面不处在顶部，即往下拉动页面后，鼠标的真实位置和代码得到的鼠标位置有一个是相对的位置，有一个是绝对的位置，层的显示位置就变乱了,9楼的没有这个问题出现，但是不兼容火狐，不知道怎么改好。想用9楼的那种

没试过在FF下的效果，，我看看加个判断上去，，wait....

加上了对IE和FF浏览器的区别，，其实就是FF要加一个"px" ,而IE不用
<html>
<head>
<style>
.calendar_Layer_tablebg {
background-color: #bc8e41;
}
.calendar_Layer_tablein {
background-color: #FFFFFF;
}
</style>
<script language='javascript' type="text/javascript">
var show=0;
var addLeft = 5;
var addTop = 15;
var sUserAgent = navigator.userAgent;
var isOpera = sUserAgent.indexOf("Opera") > -1;
var isIE = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE") > -1 && !isOpera;
function get_pos_x(obj)
{
var x=obj.offsetLeft;
while(obj.offsetParent){
obj=obj.offsetParent;
x+=obj.offsetLeft;
} if(isIE)
{
return (x+addLeft);
}
else
{
return (x+addLeft) + "px";
}
}
function get_pos_y(obj)
{
var y=obj.offsetTop;
while(obj.offsetParent){
obj=obj.offsetParent;
y+=obj.offsetTop;
}
if(isIE)
{
return (y+addTop);
}
else
{
return (y+addTop) + "px";
}
}function show_img(obj,edate)
{
show++;
if(!obj) return;
var div_obj=document.getElementById('contents');
if( 1==1 ) {
div_obj.innerHTML="<table cellpadding=\"1\" cellspacing=\"1\" class=\"calendar_Layer_tablebg\"><tr><td class=\"calendar_Layer_txt1\">" + edate + "</td></tr><tr><td class='calendar_Layer_tablein'>" + edate + "</td></tr></table>";
//alert(get_pos_y(obj));
div_obj.style.left=get_pos_x(obj); //+5; //x;
div_obj.style.top= get_pos_y(obj); //+15; //y;
div_obj.style.display="inline";
}else div_obj.style.display="none";
}
function hide_img()
{
if(--show>0) return;
var div_obj=document.getElementById('contents');
div_obj.style.display='none';
}
</script>
</head>
<body>
<div class="calendar_Layer" id="contents" style="position:absolute;display:none" onmouseover="show_img()" onmouseout="window.setTimeout('hide_img()',5)"></div><table width="50%">
<tr>
<td ><a href='' onmouseover="show_img(this,'2007-1-1')" onmouseout="window.setTimeout('hide_img()',5)" >用户1</a></td>
</tr><tr><td height='20'> </td></tr><tr>
<td ><a href='' onmouseover="show_img(this,'2007-1-5')" onmouseout="window.setTimeout('hide_img()',5)" >用户2</a></td>
</tr>
</table>
</body>
</html>

调试易

如何实现像CSDN上那样,当鼠标移到用户头像上时,会出现用户的详细信息？

解决方案 »