鼠标经过弹出详细 AJAX实现鼠标经过弹出仔细讲解示例

时间:2021-03-20 人气:0

想了解AJAX实现鼠标经过弹出仔细讲解示例的相关内容吗，在本文为您仔细讲解鼠标经过弹出详细的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：AJAX,鼠标经过,弹出，下面大家一起来学习吧。

 
<span style="font-size:14px;"><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> </span> 

加载全部内容