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

最新推荐文章于 2021-11-03 23:37:36 发布

iteye_2323

最新推荐文章于 2021-11-03 23:37:36 发布

阅读量121

点赞数

文章标签： java code

本文链接：https://blog.csdn.net/iteye_2323/article/details/82132073

版权

很老很久的一个话题和技术，可是依然找不到以前写的代码，现在拿出来，免得以后乱找，技术实现，鼠标放在超链接上触发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>

iteye_2323

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX实现鼠标经过弹出详细介绍

很老很久的一个话题和技术，可是依然找不到以前写的代码，现在拿出来，免得以后乱找，技术实现，鼠标放在超链接上触发JS实现弹出详细简介。[code="java"] var eposx ; var eposy ; function showRequest(pid,event){ eposx = event.clientX; eposy = event.clientY;...
复制链接

扫一扫