`
yr512656630
  • 浏览: 321575 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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

阅读更多
很老很久的一个话题和技术,可是依然找不到以前写的代码,现在拿出来,免得以后乱找,技术实现,鼠标放在超链接上触发JS实现弹出详细简介。

<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>






  • 大小: 13.5 KB
2
1
分享到:
评论

相关推荐

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

    本文将介绍如何使用AJAX技术实现鼠标悬停在页面元素上时弹出详细介绍的功能。 在本示例中,鼠标悬停在商品链接上时,会触发JavaScript函数showRequest,该函数将根据传入的参数pid(商品标识)和event对象(鼠标...

    jQuery鼠标经过弹出层效果

    本实例重点讲解如何利用jQuery实现鼠标经过时弹出层的效果,这种效果常用于展示详细信息、提示或者菜单。在网页设计中,它可以提升用户体验,使用户能够快速获取相关信息。 首先,我们需要理解jQuery的基本用法。...

    AJAX弹出提示信息效果

    本文将详细介绍一个具体的AJAX弹出提示信息效果案例,包括其实现原理、HTML结构、CSS样式以及JavaScript代码分析。 #### 二、HTML结构 该示例中主要包含两个关键元素:`#massage_box` 和 `#mask`。 1. **`#...

    隐藏在左边的导航菜单鼠标经过弹出jquery特效

    标题中的“隐藏在左边的导航菜单鼠标经过弹出jquery特效”指的是一个网页设计中的交互功能。这个功能通常出现在网站的左侧,当用户鼠标悬停在导航菜单上时,会有一个弹出的效果,显示更多的子菜单或者相关信息。这种...

    ajax 实现右键 弹出层

    本篇文章将深入讲解如何使用Ajax实现右键弹出层,并结合jQuery Treeview插件来构建一个具有层次结构的右键菜单。 首先,我们需要理解Ajax的基本原理。Ajax的核心是XMLHttpRequest对象,它允许在不刷新整个页面的...

    鼠标点击弹出弹出框功能

    本篇将详细讲解如何使用JavaScript(js)与jQuery库来实现一个点击鼠标后弹出弹出框的功能。 首先,我们需要了解JavaScript和jQuery的基础。JavaScript是一种轻量级的编程语言,主要用于网页和网络应用的客户端脚本...

    鼠标点击按钮弹出层可以写from表单登陆框弹出层

    4. **表单交互**:用户在弹出层中填写信息后,点击提交按钮,JavaScript会收集表单数据并通过Ajax请求发送到服务器。这样,页面不会刷新,保持弹出层的显示状态。 5. **服务器响应处理**:服务器验证用户信息后,...

    JQ鼠标经过标题向上弹出特效

    本文将深入探讨如何利用jQuery实现"鼠标经过标题向上弹出特效"的功能,这在网页设计中常用于创建吸引用户的交互体验。 首先,我们需要理解这个特效的基本原理。当用户将鼠标光标悬停在标题元素上时,一个包含相关...

    jQuery鼠标悬停或经过图片时弹出二维码遮罩效果

    "jQuery鼠标悬停或经过图片时弹出二维码遮罩效果"是一个常见的交互设计技巧,它能够提升网站的吸引力和功能性。这个功能通常用于分享、推广或者提供更多信息的方式,让用户在鼠标悬停在图片上时,能够快速查看或扫描...

    jQuery实现的AJAX简单弹出层效果代码

    综上所述,通过jQuery实现的AJAX简单弹出层效果涉及页面元素的动态操作、鼠标事件响应、浏览器兼容性处理、安全性考虑以及用户体验优化。掌握这些知识点,开发者能够创建出既美观又功能强大的弹出层效果,从而提升...

    jquery框架 用户弹出框 ajax请求(仿新浪用户信息弹出框)

    本主题将深入探讨如何使用jQuery来创建一个用户弹出框,并结合Ajax请求实现类似新浪用户信息展示的功能。这个功能通常用于显示用户的详细资料,如头像、昵称、简介等,当用户鼠标悬停或点击用户名时,弹出框会动态...

    jquery弹出层鼠标点击弹出层可浮动在屏幕滚动

    标题中的“jquery弹出层鼠标点击弹出层可浮动在屏幕滚动”指的是使用jQuery实现的弹出层功能,当用户点击文字或图片时,弹出层会出现在屏幕中央,并且能随着浏览器窗口的滚动而保持相对位置,始终在用户的视线范围内...

    jQuery鼠标经过弹出圆环菜单代码.zip

    《jQuery鼠标经过弹出圆环菜单代码解析及应用》 在网页设计中,交互性和用户体验是至关重要的元素,其中菜单导航的设计尤其关键。本篇文章将深入解析“jQuery鼠标经过弹出圆环菜单代码”这一技术,它基于...

    当鼠标经过控件时会弹出一个层

    ### 当鼠标经过控件时会弹出一个层:解析与实现 #### 一、概述 在Web开发中,用户交互是提升用户体验的关键因素之一。本文介绍了一种常见且实用的效果——当鼠标移动到某个控件上时,会弹出一个与该控件对齐的信息...

    鼠标滑过图片,在图片上显示图片信息。鼠标经过弹出图片信息

    下面将详细解释这一技术的工作原理和实现方法。 首先,我们需要理解jQuery的核心概念。jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。在这个例子中,我们利用jQuery来...

    jQuery鼠标点击弹出登录框代码.zip

    在IT领域,jQuery是一个...总的来说,这个资源为开发者提供了一个实用的工具,可以帮助他们在自己的项目中快速实现鼠标点击触发的弹出式登录功能,提高用户体验,并且展示了jQuery在事件处理和DOM操作方面的强大能力。

    jQuery 鼠标滑过链接文字弹出层提示的效果

    **jQuery 鼠标滑过链接文字弹出层提示效果详解** 在网页设计中,提升用户体验的一个重要方式是提供直观且交互性强的提示信息。"jQuery 鼠标滑过链接文字弹出层提示效果"就是一个这样的功能,它能够帮助用户在不离开...

Global site tag (gtag.js) - Google Analytics