| 发表于：2007-10-16 21:36:12 楼主 |
一个模仿qq的好友信息显示的效果，本来也不是很难，由于本人是新手，走了不少弯路，也在这里发过询问帖子，最后还是弄出来了，在这里感谢大家的帮助^_^
我很菜，做的不是太好，请大家多提意见
完整的图片和代码可以到这里下载
主要的代码如下：
<!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">
<!--
#layer1 {
position:absolute;
width:200px;
height:115px;
z-index:9927;
left: 619px;
top: 215px;
background-color: #999999;
}
-->
</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>
<!-- txqqpop_show的参数含义是1.自定义字符串,2.this对象本身，3.right或者down 显示在右边或者下面，4.x偏移量，5.y偏移量 -->
<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> |
|
|
|
|
