ajax鼠标悬停,AJAX实现鼠标经过弹出详细介绍示例

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

for(var i=0;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 += '

价格:' + price + '';

li += '

数量:' + num + '';

li += '

产地:' + chandi + '';

}

li += '

';

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

}

数据提示

---

商品列表:

商品A

商品B

商品C