类似于当当网的发货以后的那个发货反馈，鼠标移上去后自动会弹出一个框，位置随位置的改变而改变，代码如下：
<!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的鼠标移到问号上出现提示框的demo，可以用于表单项的说明
jquery 鼠标移入显示悬浮框 jquery 鼠标移入显示悬浮框 jquery 鼠标移入显示悬浮框
js mootools手风琴插件当鼠标移到某一张图片时将展开整张... js mootools手风琴插件当鼠标移到某一张图片时将展开整张... js mootools手风琴插件当鼠标移到某一张图片时将展开整张...
想达到鼠标悬停到元素a上，显示另一个元素b，可以通过css实现也可以通过js实现。 js: 写两个函数：mouseenter，mouseleave，例如：其中 $("#a").mouseenter(function() { $("#b").show("normal"); }); $("#a")....
鼠标移到DIV上特效,鼠标移到DIV上特效，鼠标移到DIV上特效
鼠标移上能弹出一个div 的下拉框，可以点击里面的链接，鼠标移开是关闭下拉框
鼠标移到菜单上弹出二级菜单特效,利用timeout原来，以及 mouseout 和 mousehover 的先后原来。 只是一个简单 demo，未做其他处理。
当光标移动到某些元素上时，会弹出像tips的提示框。 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>...
鼠标点击按钮弹出层可以写from表单登陆框弹出层 鼠标点击按钮弹出层可以写from表单登陆框弹出层 鼠标点击按钮弹出层可以写from表单登陆框弹出层
一些不错的效果，代码也简单易懂，希望你们喜欢，我也是找了很久才找到的呢！！！
JQuery 鼠标移到小图上显示大图
鼠标移到左上角自动弹出左侧隐匿菜单,代码不多，迟些修改成移动专用
仿QQ新闻弹出框，网上找了一下别人的，发现不怎么好用。自己写一个，感觉还行。界面自己ps。。 主意功能：过时渐进消失，鼠标放上显示，弹出不获取焦点，始终在最上层。
如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。该方法依赖于工具提示（tooltip）。 1 设置延时， 超过该延时未移入弹窗则弹窗隐藏 ...
具体思路为：.首先要定位实现这种效果的元素 ，本次通过class；如果是动态显示不同的提示内容，需设置title;通过JQ给定位到元素加上 mouseover 和mouseout 事件
js按住鼠标左键选中元素框代码是一款点击鼠标左键长按区域选择元素框。
易语言鼠标移入移出窗口消息源码,鼠标移入移出窗口消息,子程序_窗口函数,取得窗口信息_,呼叫窗口函数地址_,TrackMouseEvent,SetWindowLong
当鼠标经过控件时会弹出一个层,和控件对齐，自己可以调
js仿百度弹出登录框支持鼠标拖拽效果
插件名称: DrawSelect； 环境: jQuery. 描述: 鼠标框选 页面元素. 传入对象: 可以被选择的元素集合.