提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

AJAX实现鼠标经过弹出详细介绍示例

AJAX 实现 详细 介绍 示例 鼠标 经过
2023-06-13 09:15:05 时间
复制代码代码如下:

<spanstyle="font-size:14px;"><scripttype="text/javascript">
vareposx;
vareposy;
functionshowRequest(pid,event){
eposx=event.clientX;
eposy=event.clientY;
varurl="tip.jsp";
varparams="pid="+pid+"&time="+(newDate()).toString();
sendRequest(url,params,"GET",showDetail);
}

//动态加载数据部门列表
functionshowDetail(){
if(httpRequest.readyState==4){
if(httpRequest.status==200){
varmembersData=httpRequest.responseXML.getElementsByTagName("member");
varmembersList=document.getElementById("detail");
//循环将数据插入列表框中
varli="<table>";
for(vari=0;i<membersData.length;i++){
varprice=membersData[i].childNodes[0].firstChild.nodeValue;
varnum=membersData[i].childNodes[1].firstChild.nodeValue;
varchandi=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("您请求的页面有异常");
}
}
}

functionhidendiv(){
varmembersList=document.getElementById("detail");
membersList.innerHTML="";
membersList.style.visibility="hidden";
}

functionsetDivPosition(){
vargoodslist=document.getElementById("goodslist");
eposx=goodslist.offsetLeft+goodslist.offsetWidth-2;
eposy+=goodslist.offsetTop-100;
varlistdiv=document.getElementById("detail");
listdiv.style.left=eposx+"px";
listdiv.style.border="blue1pxsolid";
listdiv.style.top=eposy+"px";
listdiv.style.width="100px";
listdiv.style.zIndex="999";
}
</script>
</head>
<body>
<h1>数据提示</h1>
<hr/>
商品列表:
<pid="goodslist"style="float:left;"onmouseout="hidendiv();">
<ahref="javascript:void(0);"onmouseover="showRequest("p1",event);">商品A</a><br/>
<ahref="javascript:void(0);"onmouseover="showRequest("p2",event);">商品B</a><br/>
<ahref="javascript:void(0);"onmouseover="showRequest("p3",event);">商品C</a><br/>
</p>
<divid="detail"style="background-color:green;position:absolute;visibility:hidden">
</div></span>

相关文章