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

发布时间：2020-12-16 00:53:53 所属栏目：百科来源：网络整理

导读：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,'

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!