• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    AJAX实现鼠标经过弹出详细介绍示例
    复制代码 代码如下:

    span style="font-size:14px;">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;imembersData.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> /span>
    您可能感兴趣的文章:
    • Ajax加载外部页面弹出层效果实现方法
    • div弹出层的ajax登录(Jquery版+c#)
    • AJAX使用了UpdatePanel后无法使用alert弹出脚本
    • ASP.NET AJAX时用alert弹出对话框
    • AJAX简单应用实例-弹出层
    • .net采用ajax实现邮箱注册和地区选择实例
    • ajax请求post和get的区别以及get post的选择
    • ajax读取数据库内容实现二级联动下拉选择菜单示例
    • Ajax实现弹出式无刷新城市选择功能代码
    上一篇:JQuery中Ajax的Post提交在IE下中文乱码的解决方法
    下一篇:ajax的两种提交方式(get/post)和两种版本
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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