类似于当当网的发货以后的那个发货反馈，鼠标移上去后自动会弹出一个框，位置随位置的改变而改变，代码如下：
<!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>
分享到：
相关推荐
本篇文章将介绍如何使用JavaScript和CSS实现一个鼠标经过时弹出DIV框的效果，并在弹出时添加缓冲动画和渐变效果。 首先，我们来理解一下这个效果实现的核心概念。当鼠标悬停在页面的某个区域上时，通过CSS和...
删除功能则可以通过在每个问题旁边添加一个删除按钮，并绑定删除事件。在确认删除后，使用`.remove()`方法将相应的DOM元素从页面中移除。 Bootstrap作为前端框架，提供了丰富的UI组件和样式，使得构建问卷调查的...
4.16 鼠标移到下拉框时自动全部打开 4.17 checkbox鼠标移入移出的特效 第5章 层和框架的特效 5.1 div层提示效果 5.2 层自动滚动到最底端 5.3 div的自动滚动 5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 ...
4.16 鼠标移到下拉框时自动全部打开 4.17 checkbox鼠标移入移出的特效 第5章 层和框架的特效 5.1 div层提示效果 5.2 层自动滚动到最底端 5.3 div的自动滚动 5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 ...
3. 竖型鼠标触发内容切换：这是一种增强用户体验的设计，用户将鼠标移到某个竖向列表项上时，相应的详细内容会在旁边区域显示。这通常结合`.mouseenter()`和`.mouseleave()`事件以及`.html()`方法来改变内容。 4. ...
4. **结果显示**：计算出的面积可以显示在一个弹出框或者地图旁边的控制面板上。这需要一些DOM操作和CSS样式设置。 5. **地图交互**：为了确保测量工具与地图的其他元素（如缩放、平移等）良好配合，你需要适当地...
- 函数`hi()`用于显示文档的最后修改日期并弹出消息框。 #### 15. 使用JavaScript事件 使用HTML `<a>` 标签结合JavaScript事件处理程序，实现链接的特殊功能。 **示例代码：** ```html <!--Hiding function ...
Flyout是一种用户界面元素，当鼠标悬停在某个元素上时，它会从该元素旁边弹出，显示附加信息或操作选项。在Google地图中，当用户将鼠标移到地图上的某个地点时，一个Flyout会显示详细信息，如地址、评分等。 要创建...
自定义分隔符现在包括事件发生时的管道日志页面以获取更多可见性## v1.0.1-增强功能：-引导程序更新至3.3.7-修复：-IP网络信息：弹出窗口在Firefox中不起作用## v1.0.0-我自己的内部决定：这是1.0版本；-)-新功能：-...