发一个模仿QQ用户信息提示的JS效果，请大家多提意见^该怎么处理

2012-02-26

发一个模仿QQ用户信息提示的JS效果，请大家多提意见^_^一个模仿QQ的好友信息显示的效果，本来也不是很难，由

发一个模仿QQ用户信息提示的JS效果，请大家多提意见^_^
一个模仿QQ的好友信息显示的效果，本来也不是很难，由于本人是新手，走了不少弯路，也在这里发过询问帖子，最后还是弄出来了，在这里感谢大家的帮助^_^
我很菜，做的不是太好，请大家多提意见

完整的图片和代码可以到这里下载 http://www.114vip.com.cn/upload/down/qqpop.rar

主要的代码如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">

</style>
</head>

<body>

<script language="javascript">
var txqqpop_timer=0;
function txqqpop_getObjX(temp_obj)
{
var temp_i=temp_obj.offsetLeft;
while (temp_obj=temp_obj.offsetParent)
{
temp_i+=temp_obj.offsetLeft;
}
return temp_i;
}
function txqqpop_getObjY(temp_obj)
{
var temp_i=temp_obj.offsetTop;
while (temp_obj=temp_obj.offsetParent)
{
temp_i+=temp_obj.offsetTop;
}
return temp_i;
}

function txqqpop_show(qqpop_username,temp_obj,qqpop_type,move_x,move_y)
{
// 欢迎访问www.114vip.com.cn
// 有什么问题可以联系我 QQ：511795070
var temp_popdiv=document.getElementById("tx_txqqpop_div");
if (txqqpop_timer!=0)
{
clearTimeout(txqqpop_timer);
txqqpop_timer=0;
}
if (temp_popdiv.style.display!="none") {return ;}
var temp_obj_x=txqqpop_getObjX(temp_obj);
var temp_obj_y=txqqpop_getObjY(temp_obj);
if (qqpop_type=="right")
{
temp_popdiv.style.left=temp_obj_x + parseInt(temp_obj.offsetWidth) + move_x;
temp_popdiv.style.top =temp_obj_y + move_y;
}
else
{
temp_popdiv.style.left=temp_obj_x + move_x;
temp_popdiv.style.top =temp_obj_y + parseInt(temp_obj.offsetHeight) + move_y;
}
temp_popdiv.style.display="";
}

function txqqpop_hide()
{
txqqpop_timer=setTimeout("txqqpop_hideme()",400);
}
function txqqpop_hideme()
{
var temp_popdiv=document.getElementById("tx_txqqpop_div");
temp_popdiv.style.display="none";
if (txqqpop_timer!=0)
{
clearTimeout(txqqpop_timer);
txqqpop_timer=0;
}
}
function txqqpop_keepshow()
{
if (txqqpop_timer!=0)
{
clearTimeout(txqqpop_timer);
txqqpop_timer=0;
}
var temp_popdiv=document.getElementById("tx_txqqpop_div");
if (temp_popdiv.style.display=="none") {temp_popdiv.style.display="";}
}
</script>

<div style="position:absolute;border:1px solid #3669A3;z-index:9986;width:282px;height:205px;display:none" id="tx_txqqpop_div" onmouseout="txqqpop_hide();" onmouseover="txqqpop_keepshow();">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#d2e5f4" id="tx_txqqpop_table" background="qy_images/qqpopbg_9.jpg">
<tr>
<td height="6" colspan="2"></td>
</tr>
<tr>

<td height="173" width="98" align="center" valign="top">
<img src="qy_images/no_pic.jpg" width="82" height="122" style="border:1px solid #235185" id="tx_txqqpop_pic" /><br /><br />
<a href="#" target="_blank" style="color:#0E196A;text-decoration:none;font-size:12px" id="tx_txqqpop_a1">查看详细信息</a>
</td>
<td height="173" width="184" valign="top" style="font-size:12px">
<a href="#" target="_blank" style="color:#0E196A;text-decoration:none" id="tx_txqqpop_a2">用户名(用户类型)</a><br />
<a href="#" target="_blank" style="color:#595959;text-decoration:none" id="tx_txqqpop_a3">用户个性签名</a><br />
<a href="#" target="_blank" style="color:#FF0066;text-decoration:none" id="tx_txqqpop_a4">信誉度：0</a><br />
<img src="qy_images/dengji_11.gif" border="0" alt="等级:11级" id="tx_txqqpop_dengji" /><br />
<hr size="1" noshade="noshade" style="color:#8cacd3" />
<img src="qy_images/dengji_1.gif" width="17" height="16" border="0" /><font color="#0e196a">我的个人说明</font><br />
<a href="#" target="_blank" style="color:#595959;text-decoration:none" id="tx_txqqpop_a5">
个人简介
</a>
</td>
</tr>
<tr>
<td height="26" colspan="2" bgcolor="#b4e0fe" style="font-size:12px;filter:alpha(opacity=62)">
<span style="position:absolute;margin-top:3px;margin-left:9px" id="tx_txqqpop_span">
<a href="#"><img src="qy_images/myserver_con.gif" border="0" width="20" height="20" alt="普通会员" /></a>
<a href="#"><img src="qy_images/myserver_b1.gif" border="0" width="20" height="20" alt="普通会员" /></a>
<a href="#"><img src="qy_images/myserver_q1.gif" border="0" width="20" height="20" alt="普通会员" /></a>
<a href="#"><img src="qy_images/mysever1_1.gif" border="0" width="20" height="20" alt="企业黄页用户" /></a>
</span>
</td>
</tr>
</table>
</div>


<div id="Layer1" onmouseover="txqqpop_show('',this,'down',30,20);" onmouseout="txqqpop_hide();">鼠标放到这里</div>

<br /><br /><br />
                                                    
<a href="#" onmouseover="txqqpop_show('',this,'right',0,0);" onmouseout="txqqpop_hide();">点击这里</a>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</body>
</html>

[解决办法]
- -!只是一个根据获取位置而显示的层。界面如何只是美工的问题，没什么意见。。。

但支持楼主的钻研精神，顶一下。楼主以后学多了，可以把代码改得更精练，希望不断完善和完美哈，支持。

热点排行

JavaScript

发一个模仿QQ用户信息提示的JS效果，请大家多提意见^该怎么处理