类似于当当网的发货以后的那个发货反馈，鼠标移上去后自动会弹出一个框，位置随位置的改变而改变，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>框框随着鼠标点击的元素的位置改变而改变</title>
<style type="text/css">
a{
border: 1px solid #0f0;
margin: 20px;
width: 60px;
height: 30px;
line-height: 30px;
float: left;
display: block;
text-align: center;
}
.pop{
width: 350px;
height: 200px;
border: 1px solid #00f;
background-color: #ffffee;
display: none;
position:absolute; /* 注：弹出框必须为绝对定位 */
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function hidedetails(){
$("#details").hide();
}
function showdetails(thisObj,orderid){
var d = $(thisObj);
var pos = d.offset();
var t = pos.top + d.height() + 5; // 弹出框的上边位置
var l = pos.left + d.width() + 5; // 弹出框的左边位置
$("#details").css({ "top": t, "left": l }).show();
$("#details").html("订单 "+orderid+" 的内容！");
}
</script>
</head>
<body>
<a href="javascript:void(0)" onmouseover="showdetails(this,1)" onmouseout="hidedetails()">订单1</a>
<a href="javascript:void(0)" onmouseover="showdetails(this,2)" onmouseout="hidedetails()">订单2</a>
<a href="javascript:void(0)" onmouseover="showdetails(this,3)" onmouseout="hidedetails()">订单3</a>
<a href="javascript:void(0)" onmouseover="showdetails(this,4)" onmouseout="hidedetails()">订单4</a>
<a href="javascript:void(0)" onmouseover="showdetails(this,5)" onmouseout="hidedetails()">订单5</a>
<div id="details" class="pop">
</div>
</body>
</html>
分享到：
相关推荐
在今天的知识分享中，我们将探讨如何利用JQuery实现一个常见的网页交互效果：鼠标移上元素时弹出提示框，鼠标移出时提示框消失。这一交互功能在用户界面设计中非常实用，能够有效地为用户提供额外的信息或说明。 ...
Tooltip 是一种UI设计模式，当用户将鼠标指针悬停在某个元素上时，会弹出一个小窗口显示与该元素相关的附加信息。在Web开发中，我们可以利用HTML、CSS和JavaScript来创建这种效果。 jQuery 提供了一种简单的方法来...
"基于jQuery的鼠标移到问号上出现提示框的demo"是一个常见的交互元素，常用于提供表单项的附加信息或帮助用户理解复杂的输入要求。这个功能利用了jQuery库的强大功能，使得在网页上实现这种交互效果变得简单高效。 ...
在网页设计中，弹出框是一种常见的交互元素，用于显示额外的信息或获取用户的输入。"div弹出框"和"js弹出框"是指利用HTML的div元素和JavaScript技术来实现这种功能。本文将深入探讨如何使用这两种方法创建自定义弹出...
5. **添加关闭功能**：为了让用户可以关闭弹出框，我们可以在弹出框内添加一个关闭按钮或者一个“X”图标，并同样使用jQuery处理关闭事件： ```html 弹出框标题 弹出框内容 关闭 ``` 然后添加相应的...
### 鼠标移入弹出提示框技术详解 #### 技术背景及应用场景 在网页设计与开发中，为了提升用户体验，增加交互性，开发者经常会在网站中加入各种动态效果。其中，“鼠标移入弹出提示框”是一种非常实用且常见的功能...
"鼠标移到菜单上弹出二级菜单特效"是一个常见的网页交互元素，尤其适用于导航菜单。这种特效通常用于当用户将鼠标悬停在主菜单项上时，会展示出与之相关的子菜单项，以便用户能够更快速地访问他们感兴趣的内容。 在...
2. **鼠标放上显示**：当鼠标指针移动到弹出框上时，弹出框保持可见。这可以通过处理鼠标事件（如MouseEnter和MouseLeave）来实现。当鼠标进入弹出框范围时，取消关闭计时器；当鼠标离开时，重新启动计时器，使弹出...
在网页设计和开发中，"鼠标经过弹出框"是一种常见的交互元素，它可以在用户将鼠标悬停在特定元素上时显示相关信息。这种技术能够增强用户体验，提供额外的上下文信息，而不会打断用户的浏览流程。本文将深入探讨这一...
在网页设计和开发中，"泽元div 弹出层,弹出框"是一个常见的功能需求，用于显示一些额外的信息或者交互元素，如警告、确认对话框、表单填写等。这种技术通常涉及到HTML、CSS以及JavaScript的使用，尤其是jQuery或者...
4. **事件处理**：jQuery的事件处理函数如`.on()`使得在弹出框上响应用户交互变得简单。例如，可以绑定`click`事件来触发弹出框的显示，或者绑定`close`按钮的`click`事件来关闭弹出框。 5. **模态对话框**：在网页...
"span 鼠标移上动画提示弹窗"是一个典型的UI交互设计元素，它旨在通过动态效果提供信息提示，增强用户的交互体验。在这个设计中，我们关注的是鼠标悬停时出现的提示窗口，它能以各种颜色和场景适应不同的应用需求，...
在网页设计中，"鼠标移到DIV上特效"是一种常见的交互设计技术，用于增强用户体验。它主要涉及JavaScript（JS）、HTML和CSS这三种核心技术。本文将详细介绍如何实现这一效果，并通过实例解析来帮助理解。 首先，HTML...
想达到鼠标悬停到元素a上，显示另一个元素b，可以通过css实现也可以通过js实现。 js: 写两个函数：mouseenter，mouseleave，例如：其中 $("#a").mouseenter(function() { $("#b").show("normal"); }); $("#a")....
如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。该方法依赖于工具提示（tooltip）。 1 设置延时， 超过该延时未移入弹窗则弹窗隐藏 ...
这段代码的主要目的是实现在鼠标移入特定元素时弹出一个包含自定义内容的层。具体实现步骤如下： 1. **初始化层**： - 创建一个`div`元素作为弹出层，并进一步创建两个子`div`元素分别作为头部（`dvHdr`）和主体...
弹出层的设计可以是模态（阻断用户对其他页面元素的交互）或非模态（允许用户在弹出层存在时继续与页面互动）。 "from表单"（应为"form表单"）是HTML中的一个重要组成部分，用于收集用户输入的数据。一个登录表单...
它允许用户在将鼠标悬停在某个元素上时，出现一个提示框来显示与该元素相关的附加信息。这种设计能够帮助用户快速理解页面元素的具体含义或功能，而无需离开当前位置或点击其他地方。 实现这一功能，通常会涉及到...
同时，确保在用户移开鼠标时，弹出框能够优雅地隐藏。 通过以上步骤，我们就利用jQuery实现了类似新浪用户信息弹出框的功能。这个过程涉及到了DOM操作、事件监听、Ajax请求以及简单的动画效果，展示了jQuery在前端...
比如，可以在弹出框内添加一个关闭图标，或者设置一个点击遮罩层关闭弹出框的逻辑。当这些元素被点击时，调用jQuery的hide方法，或者通过修改CSS属性使弹出框恢复到初始状态。 在实际应用中，为了提高代码复用性...