AJAX實現鼠標經過彈出詳細介紹示例

來源：懂視網責編：小采時間：2020-11-27 22:52:22

AJAX實現鼠標經過彈出詳細介紹示例

AJAX實現鼠標經過彈出詳細介紹示例: 代碼如下:<span style=font-size:14px;><script type=text/javascript> var eposx ; var eposy ; function showRequest(pid,event){ eposx = event.clientX; eposy = event.clie

推薦度：

點擊下載本文 文檔為doc格式

導讀AJAX實現鼠標經過彈出詳細介紹示例: 代碼如下:<span style=font-size:14px;><script type=text/javascript> var eposx ; var eposy ; function showRequest(pid,event){ eposx = event.clientX; eposy = event.clie

代碼如下:


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

 
 




聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

AJAX實現鼠標經過彈出詳細介紹示例

推薦度：

點擊下載本文 文檔為doc格式

標簽：介紹實現例子

熱門焦點

AJAX實現鼠標經過彈出詳細介紹示例

AJAX實現鼠標經過彈出詳細介紹示例

AJAX實現鼠標經過彈出詳細介紹示例

最新推薦

猜你喜歡

熱門推薦