ajax TooTip 异步显示动态数据

最新推荐文章于 2022-02-22 21:32:27 发布

给力地板油

最新推荐文章于 2022-02-22 21:32:27 发布

阅读量653

点赞数

分类专栏： ajax 文章标签： ajax xmlhttprequest class function stylesheet border

本文链接：https://blog.csdn.net/wslyy99/article/details/6616275

版权

ajax 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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}

给力地板油

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax TooTip 异步显示动态数据

body,td,th { font-size: 12px; font-family: "Verdana", "Arial", "Helvetica", "sans-serif";} aaaaaaaaaaaaa
复制链接

扫一扫