AJAX实现鼠标经过弹出详细介绍示例
发布时间:2020-12-16 00:53:45 所属栏目:百科 来源:网络整理
导读: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() ;send
<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'; } //http://www.unitymanual.com/forum-news-1.html unity3d资讯 </script> </head> <body> <h1>数据提示</h1> <hr /> 商品列表: <p id="goodslist" style="float:left;" href="void(0);" >商品A</a><br/> <a href="void(0);" >商品B</a><br/> <a href="void(0);" id="detail" style="background-color:green;position:absolute;visibility:hidden"> </div> </span> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |