首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Ajax >

AJAX兑现鼠标经过弹出详细介绍

2012-10-21 
AJAX实现鼠标经过弹出详细介绍很老很久的一个话题和技术,可是依然找不到以前写的代码,现在拿出来,免得以后

AJAX实现鼠标经过弹出详细介绍
很老很久的一个话题和技术,可是依然找不到以前写的代码,现在拿出来,免得以后乱找,技术实现,鼠标放在超链接上触发JS实现弹出详细简介。

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

热点排行