`
- 浏览:
118407 次
- 性别:
- 来自:
北京
-
- <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>
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
鼠标经过弹出详细内容的效果想必大家都有见到过吧,其实很简单,在本文为大家介绍下使用ajax实现此效果,感兴趣的朋友可以参考下
主要介绍了jQuery实现的AJAX简单弹出层效果代码,涉及jQuery响应鼠标事件动态操作页面元素实现弹出层效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
ajax鼠标悬停模式,结合了CSS xml,xsL javascript,来显示一个透明的弹出菜单
地图热点效果-鼠标经过弹出提示信息</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <script src="/ajaxjs/jquery-1.6.2.min.js" type="te
内容索引:脚本资源,Ajax/JavaScript,弹出层,盒子 Hongru-Box,弹出层插件,鼠标点击以下内容会弹出对应示例,背景变暗,流行功能: 不设任何options参数的box(默认弹出高200px,宽300px的层盒子) 普通设定...
项目内容从创建原生态的HTTPXMLRequest实现ajax开始,详细讲解ajax的应用,各种应用场合的实战案例;利用JQuery的ajax支持,详细讲解$.ajax,$.post,$.get等方法实现ajax技术;讲解ajax文件上传,三级联动等;利用...
超简单弹出DIV层,一个js function 就可完成.无需要另外代码. 你可以进行展示,结合Ajax等
支持弹出层的鼠标拖动移动,该部分用纯js编写执行效率更高 支持ajax加载页面到弹出层 支持一个页面,同时弹出多个层互不干扰 支持模式化弹出,带遮罩层 支持自定义弹出层样式 自带3个事件,开启、关闭、移除 ...
摘要:脚本资源,jQuery,鼠标手势 jQuery图片鼠标手势及说明文字弹出效果,图片鼠标手势,和文字说明弹出效果,基于jQuery代码实现,值得参考。
仿Discuz的头像提示效果,鼠标放头像上,会出现此头像的用户信息,比如用户ID、金钱、威望等,使用了一个封装的JS类,可设置Tip样式,offset参数修正,移入Tip对象时保持显示状态,这里要注意,如果是外部元素进入,...
jQuery tooltip鼠标提示层,jQuery CSS实现,鼠标移到链接文字上会弹出一个图片 文字的层提示框,鼠标移走后提示自动消失,特效代码来自国外的前端设计网站。这个链接提示层支持在弹出层中显示图片、文字和链接格式...
网上找了很多代码,基本都实现了鼠标悬浮之后弹出div,离开之后马上就消失了。还有些纯CSS的代码实现了这样的效果,但是对我没用,我需要的是JS的(因为我的数据还要通过Ajax取得),并且鼠标离开后不能马上隐藏,这...
JQuery 弹出层插件 PopupDiv-v1.0,弹出后可自动居中,可自定义标题栏和关闭按钮,支持半透明状态,支持鼠标拖动,支持自定义弹出样式,支持ajax加载页面到弹出层,带遮罩层,设计美观,调用简单,使用方便。...
4种用法的弹出框浮动层,可拖动,Ajax弹出层效果,一共有4种不同形式的弹出框效果,不过风格基本一样,示例截图只是其中一种风格,怎么样?还行吧?
内容索引:脚本资源,Ajax/JavaScript,弹出层 JavaScript仿腾讯“网眼”效果,一个弹出提示层,也就是大家常见的链接提示效果,当把鼠标放到某段文字的某个链接上的时候,会弹出一个图文框,做更详细的介绍,以前在各...
9.18.htm 左键弹出式菜单效果的完整代码 9.19.htm 实现浮动菜单效果的完整代码 9.20.htm 实现树型导航菜单的完整代码 第10章(/C10/) ReturnText Ajax返回字符串数据 ReturnXML ...
充分使用.NET中的Calendar日历控件+Javascript+AJAX来实现在日历控件上点击日期能弹出录入框录入备忘录信息,鼠标移动到日期上能显示此日的备忘录信息
前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片、图片集、Ajax数据,还能加载SWF影片,iframe页面等等。 效果演示 源码下载 fancybox 特点: 可以支持...
首先,用Chrome浏览器打开微博的链接https://m.weibo.cn/u/2830678474,随后在页面中点击鼠标右键,从弹出的快捷菜单中选择“检查”选项,此时便会弹出开发者工具,如图6-2所示: 此时在Elements选项卡中便会观察到...