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

时间：2021-05-12 09:12:12|栏目：JavaScript代码|点击：次

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

上一篇：原生JavaScript写出Tabs标签页的实例代码

栏目：JavaScript代码

下一篇：JS中去掉array中重复元素的方法

本文标题：AJAX实现鼠标经过弹出详细介绍示例

本文地址：http://www.codeinn.net/misctech/120073.html

更多JavaScript代码

JavaScript代码

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

阅读排行

推荐教程