复制代码 代码如下:
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;imembersData.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>
您可能感兴趣的文章:- Ajax加载外部页面弹出层效果实现方法
- div弹出层的ajax登录(Jquery版+c#)
- AJAX使用了UpdatePanel后无法使用alert弹出脚本
- ASP.NET AJAX时用alert弹出对话框
- AJAX简单应用实例-弹出层
- .net采用ajax实现邮箱注册和地区选择实例
- ajax请求post和get的区别以及get post的选择
- ajax读取数据库内容实现二级联动下拉选择菜单示例
- Ajax实现弹出式无刷新城市选择功能代码