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

桃扇骨 2022-11-11 05:13 83阅读 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 条评论，83人围观）

还没有评论，来说两句吧...

相关阅读

相关鼠标经过，提示框

1. html元素如下： 2. <</span>div style="POSITION: relative"> 3. <</span>span id="searchLab

淡淡的烟草味﹌/ 2024年02月17日 15:08/ 0 赞/ 77 阅读

相关 CSS 实现鼠标悬停上弹出二级菜单动画显示（二）

效果： ![20200908175021900.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

系统管理员/ 2023年10月05日 09:47/ 0 赞/ 16 阅读

相关 CSS 实现鼠标悬停上弹出二级菜单（一）

效果: ![20200908174323611.png][] HTML页面 <!DOCTYPE html> <html> <head>

桃扇骨/ 2023年10月05日 09:47/ 0 赞/ 19 阅读

相关 QT鼠标右键弹出菜单

在用QT编程时，有时候要实现鼠标右键弹出菜单的功能．下面代码演示鼠标右键弹出菜单． 1.新建一个QT工程，点击MainWindow.ui，鼠标右键Go to slot....

小鱼儿/ 2023年06月06日 04:00/ 0 赞/ 42 阅读

相关鼠标经过显示大图

代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3

深藏阁楼爱情的钟/ 2022年12月19日 03:58/ 0 赞/ 176 阅读

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

<script type="text/javascript"> var eposx ; var eposy ; function showRequest(pid,eve

桃扇骨/ 2022年11月11日 05:13/ 0 赞/ 84 阅读

相关简单实现jQuery鼠标经过切换图片特效

html部分代码： <!doctype html> <html lang="ch-ZN"> <head> <meta charset=

迈不过友情╰/ 2022年10月22日 11:59/ 0 赞/ 249 阅读

相关 jquery实现鼠标经过图片时，图片上下跳动

<ul id="ul"> <li><img src="images/01.jpg"/></li> <li><img src="image

港控/mmm°/ 2022年09月10日 10:26/ 0 赞/ 232 阅读

相关实现鼠标经过,产品图片的局部放大功能

vue中实例：操作dom实现参考：https://blog.csdn.net/alightman/article/details/78074687 注意点： 1、小图、

た入场券/ 2022年05月23日 01:43/ 0 赞/ 329 阅读

相关中国地图鼠标经过省份热点弹出提示信息的网页特效

把下面代码复制一下放到txt中保存成html就可以了： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transition

短命女/ 2022年04月12日 07:17/ 0 赞/ 140 阅读