AJAX實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)彈出詳細(xì)介紹示例

2024-09-01 08:32:14

字體：大中小

供稿：網(wǎng)友

鼠標(biāo)經(jīng)過(guò)彈出詳細(xì)內(nèi)容的效果想必大家都有見(jiàn)到過(guò)吧，其實(shí)很簡(jiǎn)單，在本文為大家介紹下使用ajax實(shí)現(xiàn)此效果，感興趣的朋友可以參考下

復(fù)制代碼代碼如下:

<span><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);
}

//動(dòng)態(tài)加載數(shù)據(jù)部門列表
function showDetail(){
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
var membersData = httpRequest.responseXML.getElementsByTagName("member");
var membersList = document.getElementById("detail");
//循環(huán)將數(shù)據(jù)插入列表框中
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>價(jià)格:' + price + '</td></tr>';
li += '<tr><td>數(shù)量:' + num + '</td></tr>';
li += '<tr><td>產(chǎn)地:' + chandi + '</td></tr>';
}
li += '</table>';
membersList.innerHTML = li;
setDivPosition();
membersList.style.visibility='visible';
} else { //頁(yè)面不正常
alert("您請(qǐng)求的頁(yè)面有異常");
}
}
}

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>數(shù)據(jù)提示</h1>
<hr />
商品列表:
<p>
<a href="javascript:void(0);" >商品A</a><br/>
<a href="javascript:void(0);" >商品B</a><br/>
<a href="javascript:void(0);">商品C</a><br/>
</p>
<div>
</div> </span>