AJAX实现鼠标经过弹出详细介绍 -

zpopopo

浏览: 9915 次
性别:
来自: 北京

最近访客更多访客>>

taobushi

elyo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

AJAX实现鼠标经过弹出详细介绍

java code

很老很久的一个话题和技术，可是依然找不到以前写的代码，现在拿出来，免得以后乱找，技术实现，鼠标放在超链接上触发JS实现弹出详细简介。

<script type="text/javascript">
	var eposx ;
	var eposy ;
	function showRequest(pid,event){
		eposx = event.clientX;
		eposy = event.clientY;
		var url="tip.jsp";
		var params = 'pid='+ pid + '&time=' + (new Date()).toString() ;
		sendRequest(url,params,'GET',showDetail);			
	}
	
	//动态加载数据部门列表
	function showDetail(){
		if (httpRequest.readyState == 4) { 
			if (httpRequest.status == 200) {
				var membersData = httpRequest.responseXML.getElementsByTagName("member");
				var membersList = document.getElementById("detail");
				//循环将数据插入列表框中
				var li = '<table>';
				for(var i=0;i<membersData.length;i++){
					var price=membersData[i].childNodes[0].firstChild.nodeValue;
					var num=membersData[i].childNodes[1].firstChild.nodeValue;
					var chandi=membersData[i].childNodes[2].firstChild.nodeValue;
					li += '<tr><td>价格:' + price + '</td></tr>';
					li += '<tr><td>数量:' + num + '</td></tr>';
					li += '<tr><td>产地:' + chandi + '</td></tr>';
				}
				li += '</table>';
				membersList.innerHTML = li;
				setDivPosition();
				membersList.style.visibility='visible';
			} else { //页面不正常 
				alert("您请求的页面有异常"); 
			}
		}
	}
	
	function hidendiv(){
		var membersList = document.getElementById("detail");
		membersList.innerHTML = '';
		membersList.style.visibility='hidden';
	}
	
	function setDivPosition(){
		var goodslist = document.getElementById('goodslist');
		eposx = goodslist.offsetLeft + goodslist.offsetWidth -2;
		eposy += goodslist.offsetTop - 100;
		var listdiv = document.getElementById('detail');
		listdiv.style.left=eposx+'px';
		listdiv.style.border='blue 1px solid';
		listdiv.style.top=eposy + 'px';
		listdiv.style.width='100px';
		listdiv.style.zIndex='999';
	}
</script>
</head>
<body>
<h1>数据提示</h1>
<hr />
商品列表:
<p id="goodslist" style="float:left;" onmouseout="hidendiv();">
<a href="javascript:void(0);" onmouseover="showRequest('p1',event);" >商品A</a><br/>
<a href="javascript:void(0);" onmouseover="showRequest('p2',event);" >商品B</a><br/>
<a href="javascript:void(0);" onmouseover="showRequest('p3',event);">商品C</a><br/>
</p>
<div id="detail" style="background-color:green;position:absolute;visibility:hidden">
</div>