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

最新推荐文章于 2023-01-03 22:32:50 发布

mmmmmm123456

最新推荐文章于 2023-01-03 22:32:50 发布

阅读量138

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/mmmmmm123456/article/details/84268119

ajax 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种实现商品详情动态提示与页面加载的方法，包括事件触发、数据请求、响应解析以及页面元素布局调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   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>  