OStack程序员社区-中国程序员成长平台 › 门户 ›编程› AJAX› AJAX编程经验 › 查看内容

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

2022-2-5 16:58| 发布者: 菜鸟教程小白| 查看: 210| 评论: 0|原作者: [db:作者]|来自: [db:来源]

摘要: 鼠标经过弹出详细内容的效果想必大家都有见到过吧，其实很简单，在本文为大家介绍下使用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> 