能不能做出像csdn这样的效果!

单鼠标移到发帖人的头像时显示出一个框，
应用程序要怎么做。
有没有什么方法和代码

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

鼠标事件里面加个弹出的小页面可以不？
或者弹出一个label之类的，不是太清楚
onmouseover="javascript:try{showUserCard(event,'chenghaicys')}catch(ex){};"/*---------------------------------------------------------------------------*\
|  NameSpace:  Csdn.Forum.UserOnline
|  Author:     yizhu
|  Version:    2007-11-13
\*---------------------------------------------------------------------------*/

showUserCard.database = {}; //global userinfo database

resourcePath="/u/ui/scripts/System/_resource";

window._stopMouseOver=function(e){(window.event||e).cancelBubble=true;}
function UserCardCallback(json)
{
    if(typeof(json)=="undefined" || !json.username) return;
    showUserCard.database[json.username] = json;
    bindData(json.username);
}function showUserCard(e, user)
{
    e = (window.event||e); e.cancelBubble=true;
    var img = e.srcElement || e.target;
    if(!user) return;
    var layer=document.getElementById("UserCard_layer");
    if(!layer)
    return;
    layer.style.display="";
    var xy;
    if(navigator.userAgent.toLowerCase().indexOf("opera")<0)
    { xy=realOffset(img); layer.style.left = (xy.x+img.offsetWidth-2) +"px";}
    else//is opera
    { xy=getEventXY(e); layer.style.left = xy.x +"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='"+ resourcePath +"/blank.gif' /></a><br/>"
        +"<a href='http://webim.csdn.net/Messages/"+user+".ashx' target='_blank'><img alt='send message' class='sendIMMsg' src='"+ resourcePath +"/blank.gif' /></a><br/>"
        +"<a href='http://blog.csdn.net/{0}/' target='_blank'><img alt='blog' class='goBlog' src='"+ resourcePath+"/blank.gif' /></a><br/>"
        +"<a href=''>"
    document.getElementById("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>"
    document.getElementById("UserCard_right").innerHTML = right.format(user);    if(typeof(showUserCard.database[user])=="undefined")
    {
        SendRequest(document.getElementById("hf_cardUrl").value + user);
    }
    else bindData(user);
}
function bindData(username)
{
    var json = showUserCard.database[username];
    $("UserCard_nickname").innerHTML = json.nickname;
    for(var s="", i=0; i<json.topicList.length; i++)
    {
        s += "<li><a href='{0}' title='{2}' target='_blank'>{1}</a></li>".format(json.topicList[i].url, json.topicList[i].text.subByte(20), json.topicList[i].text.replace(/</g, "<").replace(/\'/, "'"));
    }
    if(s!="") $("UserCard_topiclist").innerHTML = "<ol>"+s+"</ol>";
}
document.attachEvent("onmouseover", function(){try{document.getElementById("UserCard_layer").style.display="none";}catch(ex){}});function SendRequest(url){
if(this.element){this.element.parentNode.removeChild(this.element)};
this.element=document.createElement("SCRIPT");
this.element.type="text/javascript";
this.element.id = "MzJsonElement";
this.element.src=url;
document.getElementsByTagName("HEAD")[0].appendChild(this.element);
}
自己另存为看看就知道啦
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <script>
    //--弹出div
var parameter;
var type;
function alert_div(type,parameter)
{
//获得鼠标当前X,Y坐标
var x,y;
if(!document.all)
{
  x=pageX;
  y=pageY;
}else{
  x=document.body.scrollLeft+event.clientX; //鼠标X轴的值
  y=document.body.scrollTop+event.clientY; //鼠标Y轴的值
} //window.scrollTo(100,500);//竖向滚动条位置 var sH = document.body.scrollHeight; //窗口的高度
var sW = document.body.scrollWidth; //窗口的宽度

var width=260 , height=90; //设置div的大小 if((x + width) >= sW) //当鼠标点击时的x坐标的值加上div的宽度大于窗口的宽度
{
  x = x - width;
} var left=x , top=y ; //设置div的位置 var str="";
// 整个div的大小和位子
str+="<div id='div1' style='z-index:1;background-color:white;position:absolute;border:2px solid slategray;left:"+left+";top:"+top+";width:"+width+";height:"+height+";'>";
//--begin灰色top
str+="<div style='padding-bottom:2px;background-color:slategray;width:100%;height:16px;color:white;'>";
// 灰色div的设置
str+=" <div style='float:left;height:16px;overflow:hidden;margin:0px;padding:4px 0px 0px 5px;width:235;'>温馨提示</div>";
// 灰色div右侧的按钮
//str+=" <span style='width:14px;font-family:webdings;cursor:hand;'>0</span>";
//str+=" <span style='width:14px;font-family:webdings;cursor:hand;' onclick='hide()'>r</span>";
str+="</div>";
//--end
//--begin白色div
str+="<div style=' margin:10px 5px 10px 10px;word-break:break-all;'>";
// 白色div中的信息
//str+="<table cellpadding='0' cellspacing='1' border='0' class='border' align=left>";
//str+="<form method='post' name='form_pwd' action='other.php?type="+type+"&_num="+parameter+"'>
//str+="<tr class='tdbg' valign='top'><td align='left'><strong>请输入密码：</strong>";
//str+="<input name='pwd' type='password' size='20' maxlength='255' style='height:18px;'></td></tr>";
//str+="<tr class='tdbg'><td colspan='2' align='center' valign='foot'><input type='submit' name='sub_pwd' value=' 确认 '>  <input type='reset' value=' 重置 '></td></tr></form></table>";
//str+="</div>";
str+="<table>"; var stype = type.split(",");
var sparameter = parameter.split(",");
var count = stype.length;
//str+="<tr><td>中行</td><td>5条</td></tr>";
for(var i=0; i<count; i++)
  {
    str+="<tr><td>"
    str+=stype[i];
    str+="</td><td>";
    str+=sparameter[i]
    str+="条</td></tr>";
  }

str+="</table>";
//--end
str+="</div>";
//document.write(str);
document.body.insertAdjacentHTML("afterBegin",str);
}
//--关闭div
function hide()
{
document.getElementById( "div1").style.display = "none";
}    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div><%= show()%>afa fasdfasfasdf</div>
    </form>
</body>
</html>
  protected string show()
    {
        string count = "移动到";
        string k1 = "中行,工行,商行";
        string k2 = "55,66,99";
        string str = "<div onmouseover=alert_div('"+k1+"','"+k2+"') onmouseout='hide()'>" + count + "</div>";
        return str;
    }
晕~~只要默认的框为0，当鼠标滑过，即mouseover时，改变CSS border为xxx