<!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>
<title></title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<style type="text/css">
body,td,th {
font-size: 12px;
font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
}
</style>
</head>
<body >
<div class="listBlock">
<div id="listFJ" class="listFJ">
<table width="100%" border="0" cellspacing="0" cellpadding="5"><tr><td><a class="item" href="#">
<img src="img/fj_48_gray.gif" /><span class="ajaxBox" diyID="11">aaaaaaaaaaaaa</span></a></td>
<td><a class="item" href="#">
<img src="img/fj_48_green.gif" /><span class="ajaxBox" diyID="12"><b class="wait"></b></span></a></td>
</tr></table>
<div class="clearFloat"></div>
<script language="javascript" type="text/javascript">
function SetAjaxBox(obj, type)
{
var box = obj.nextSibling;
if(type=='show')
{
box.style.display='block';
if(box.getElementsByTagName('b').length==1)
{
var url='geturl.jsp?id='+box.getAttribute('diyID');
var xmlHttpReq=null;
try
{
xmlHttpReq=new XMLHttpRequest();
}
catch (e)
{
try
{
xmlHttpReq=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlHttpReq.open('get',url,true);
xmlHttpReq.onreadystatechange=function ()
{
if(xmlHttpReq.readyState==4)
{
if(xmlHttpReq.status==200)
{
box.innerHTML=xmlHttpReq.responseText;
}
}
};
xmlHttpReq.send(null);
}
}
else
{
box.style.display='none';
}
}
function SetAjaxBoxZIndex()
{
var objArray=document.getElementById('listFJ').getElementsByTagName('a');
var obj;
var img;
for(var i=0;i<objArray.length;i++)
{
obj=objArray[i];
obj.style.zIndex=objArray.length-i;
img=obj.getElementsByTagName('img')[0];
img.οnmοuseοver=function(){SetAjaxBox(this,'show');};
img.οnmοuseοut=function(){SetAjaxBox(this,'hide');};
}
}
SetAjaxBoxZIndex();
</script>
</div>
</div>
</body>
</html>
css:
.listBlock { margin:0.5em; border:1px solid #FFF; background:url(../images/listBlockBg.gif)}
.listBlock .listFJ .item { float:left; display:inherit; margin-left:5px; padding-top:4px; width:80px; height:70px; line-height:2; color:#AE5900; text-align:center; overflow:hidden}
.listBlock .listFJ .item img { width:32px; height:32px}
#listFJ table .item { position:relative; overflow:visible}
#listFJ table .item .ajaxBox { display:none; position:absolute; z-index:1; left:42px; top:0; padding:6px 10px 6px 16px; width:102px; height:60px; line-height:20px; text-align:left; background:url(../images/ajaxBoxBg.gif) no-repeat; overflow:hidden}
#listFJ table .item .ajaxBox .wait { display:block; height:60px; background:url(../images/ajaxBoxWait.gif) no-repeat center; overflow:hidden}
ajax TooTip 异步显示动态数据
最新推荐文章于 2021-08-05 14:46:25 发布