iis服务器助手广告广告
返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >AJAX实现鼠标经过弹出详细介绍示例
  • 203
分享到

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

AJAX鼠标经过弹出 2022-11-15 22:11:14 203人浏览 独家记忆
摘要

<span style="font-size:14px;"><script type="text/javascript"> var eposx ; var


<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;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> </span>

--结束END--

本文标题: AJAX实现鼠标经过弹出详细介绍示例

本文链接: https://www.lsjlt.com/news/172435.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • AJAX实现鼠标经过弹出详细介绍示例
    复制代码 代码如下: <span style="font-size:14px;"><script type="text/javascript"> var ep...
    99+
    2022-11-15
    AJAX 鼠标经过 弹出
  • 使用AJAX怎么实现鼠标经过弹出
    使用AJAX怎么实现鼠标经过弹出,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。复制代码 代码如下:<span >&...
    99+
    2024-04-02
  • 怎么用css实现鼠标经过弹出子菜单特效
    这篇文章主要讲解了“怎么用css实现鼠标经过弹出子菜单特效”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用css实现鼠标经过弹出子菜单特效”吧!<...
    99+
    2024-04-02
  • 关于pyqt5弹出提示框的详细介绍
    目录前言1.软件关闭弹框2.信息提示框3.错误提示框4.警告提示框5.关于弹窗附:Python-PyQt5错误提示弹框总结前言 最近在用pyqt5设计软件时,想到了一些关于提示框的操...
    99+
    2024-04-02
  • JavaScript实现鼠标经过显示下拉框
    本文实例为大家分享了JavaScript实现鼠标经过显示下拉框的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lan...
    99+
    2024-04-02
  • JS如何实现侧边栏鼠标经过弹出框+缓冲效果
    这篇文章主要为大家展示了“JS如何实现侧边栏鼠标经过弹出框+缓冲效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JS如何实现侧边栏鼠标经过弹出框+缓冲效果”这...
    99+
    2024-04-02
  • JavaScript实现鼠标经过表格行给出颜色标识
    本文实例为大家分享了JavaScript实现鼠标经过表格行给出颜色标识,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang...
    99+
    2024-04-02
  • 利用css3实现鼠标经过动画显示详情特效
    本篇内容介绍了“利用css3实现鼠标经过动画显示详情特效”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!  ...
    99+
    2024-04-02
  • vue实现鼠标经过显示悬浮框效果
    本文实例为大家分享了vue实现鼠标经过显示悬浮框效果的具体代码,供大家参考,具体内容如下 项目架构采用vue-cli脚手架搭建的webpack项目 实现的效果如下: 鼠标经过but...
    99+
    2024-04-02
  • jquery如何实现鼠标经过显示,离开隐藏
    这篇文章主要介绍了jquery如何实现鼠标经过显示,离开隐藏的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jquery如何实现鼠标经过显示,离开隐藏文章都会有所收获,下面我们一...
    99+
    2024-04-02
  • css如何实现鼠标经过隐藏显示样式
    本篇内容介绍了“css如何实现鼠标经过隐藏显示样式”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • JavaScript实现鼠标经过显示下拉框的方法
    这篇文章主要介绍了JavaScript实现鼠标经过显示下拉框的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下代码:<!DOCTYPE html...
    99+
    2023-06-14
  • vue实现组件跟随鼠标位置弹出效果(示例代码)
    实现鼠标放置在“我的”上时出现卡片,卡片位置跟随鼠标。当鼠标移除卡片时卡片隐藏。当鼠标移入时获取鼠标坐标,并把父组件的鼠标位置通过prop传给子组件。 t...
    99+
    2024-04-02
  • css中如何实现鼠标经过出现气泡框效果
    这篇文章主要为大家展示了“css中如何实现鼠标经过出现气泡框效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css中如何实现鼠标经过出现气泡框效果”这篇文章吧...
    99+
    2024-04-02
  • 详解pytest实现mark标记功能详细介绍
    mark标记 ​在实际工作中,我们要写的自动化用例会比较多,也不会都放在一个py文件中,如果有几十个py文件,上百个方法,而我们只想运行当中部分的用例时怎么办? R...
    99+
    2024-04-02
  • C# menuStrip控件实现鼠标滑过自动弹出功能
    Menustrip控件是一个菜单栏控件,可以加载菜单栏,在很多系统中都有用到。本文介绍下该控件的一些属性的常用方式。 在页面FormMain_Load里面添加如下注册事件: ...
    99+
    2024-04-02
  • Pygame实现监听鼠标示例详解
    目录初始化参数鼠标移动鼠标点击位置输出鼠标位置及其对用的按钮完整代码 pygame如何捕捉鼠标的活动 初始化参数 import pygame, sys from pygame.l...
    99+
    2024-04-02
  • JavaScript实现鼠标经过表格行给出颜色标识的方法
    小编给大家分享一下JavaScript实现鼠标经过表格行给出颜色标识的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!Java是什么Java是一门面向对象编程语...
    99+
    2023-06-14
  • vue如何实现鼠标经过显示悬浮框效果
    这篇文章给大家分享的是有关vue如何实现鼠标经过显示悬浮框效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下项目架构采用vue-cli脚手架搭建的webpack项目实现的效果如下:鼠标经过button...
    99+
    2023-06-29
  • 怎么用纯CSS实现鼠标经过后出现下拉菜单
    这篇文章主要介绍了怎么用纯CSS实现鼠标经过后出现下拉菜单,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。   HTML部分:   1、我...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作