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

复制代码 代码如下:

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


您可能感兴趣的文章:

  • Ajax加载外部页面弹出层效果实现方法
  • div弹出层的ajax登录(Jquery版+c#)
  • AJAX使用了UpdatePanel后无法使用alert弹出脚本
  • ASP.NET AJAX时用alert弹出对话框
  • AJAX简单应用实例-弹出层
  • .net采用ajax实现邮箱注册和地区选择实例
  • ajax请求post和get的区别以及get post的选择
  • ajax读取数据库内容实现二级联动下拉选择菜单示例
  • Ajax实现弹出式无刷新城市选择功能代码
张贴在3