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

最新推荐文章于 2024-04-20 19:26:14 发布

南北雪树

最新推荐文章于 2024-04-20 19:26:14 发布

阅读量1.9k

点赞数

分类专栏： JavaScript 文章标签： ajax

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<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;" οnmοuseοut="hidendiv();">   
<a href="javascript:void(0);" οnmοuseοver="showRequest('p1',event);" >商品A</a><br/>   
<a href="javascript:void(0);" οnmοuseοver="showRequest('p2',event);" >商品B</a><br/>   
<a href="javascript:void(0);" οnmοuseοver="showRequest('p3',event);">商品C</a><br/>   
</p>   
<div id="detail" style="background-color:green;position:absolute;visibility:hidden">   
</div>

南北雪树

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX实现鼠标经过弹出详细介绍

var eposx ; var eposy ; function showRequest(pid,event){ eposx = event.clientX; eposy = event.clientY; var url="tip.jsp"; var params = '
复制链接

扫一扫