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实现鼠标经过弹出详细介绍示例

最新推荐

猜你喜欢

热门推荐