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

mgxy123

浏览: 118250 次
性别:
来自: 北京

最近访客更多访客>>

lc_luochao

lpb007007

ZhuboSky

xuxiaohongok

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

ajax

Java代码  
<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>  