鼠标移上去后自动会弹出一个框,位置随鼠标位置的改变而改变,代码如下:
<!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(Obj,orderid){
var d = $(Obj);
var pos = d.offset();
var t = pos.top + d.height()+3; // 弹出框的上边位置
var l = pos.left; // 弹出框的左边位置
$("#details").css({ "top": t, "left": l }).show();
$("#details").html("订单 "+orderid+" 的内容!");
}
</script>
</head>
<body>
<a href="javascript:void(0)" onmouseover="showdetails(this,一)" onmouseout="hidedetails()">订单一</a>
<a href="javascript:void(0)" onmouseover="showdetails(this,二)" onmouseout="hidedetails()">订单二</a>
<a href="javascript:void(0)" onmouseover="showdetails(this,三)" onmouseout="hidedetails()">订单三</a>
<a href="javascript:void(0)" onmouseover="showdetails(this,四)" onmouseout="hidedetails()">订单四</a>
<a href="javascript:void(0)" onmouseover="showdetails(this,五)" onmouseout="hidedetails()">订单五</a>
<div id="details" class="pop">
</div>
</body>
</html>
分享到:
相关推荐
QQ居右悬浮框(鼠标移上去自动展示离开自动折叠 QQ 悬浮框 代码网页已做好,直接把代码复制到自己网站即可!
鼠标移到栏目上自动弹出二级及无限级栏目
鼠标右键弹出菜单VB6.0源代码.rar
主要介绍了使用VUE实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
5.49 弹出一个自动关闭的窗口... 150 第6章 文字篇.... 152 6.1 连接字符串... 152 6.2 比较两个字符串... 153 6.3 取得字符串的长度... 154 6.4 英文字母大小写转换... 155 6.5 取得字符串中指定位置的字符.....
1. 定义收放针规律的表格中,右上角有一个五角星符号,点击,弹出菜单中可以"复制,粘贴收放针,也可以将收放针上下颠倒" 2009/11/02 10.4.5.1 1. 旋转克隆的时候, 设定角度的同时,可以看到图形的变化 2009/11/02 10.4....
5.认证后用户头像上方会显示认证标识,如果用户填写了认证信息,鼠标放置上去会显示相关认证信息. 6.认证后用户名片会显示新浪微博关注按钮,如果用户填写了新浪微博ID,其他用户就可以直接通过按钮关注 7.认证后...
如果需要使用自动阈值分割,可以在阈值方式中更改,一旦选择了“直接阈值”以外的阈值方式,程序便会自动用所选择的方法帮你计算出一个阈值,同时在直方图上会显示出该阈值的位置,还有该阈值的大小,同时预览图片也...
按下N键,被选要素就会自动地切换到另一个图层的要素上去(如图1) 3).重复操作,直到选中目标要素为止 21. 编辑时一些常用的快捷键 一、公共快捷键(对所有编辑工具有效): 在编辑未完成时按快捷键E切换到...
相当牛的jQuery动感TipBox,鼠标移上去会动的提示框哦 11.简单实用jQuery用于登录弹出层例子代码(带动画的弹出层) 12.综合jquery实现表格隔行换色和鼠标经过提示效果源码 7)日历插件 1.jQuery简洁漂亮点阵数字...
本文给大家介绍WPF自动隐藏的消息框实例代码,当鼠标放上去将一直显示,移开动画继续,提供normal和error两种边框。非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧
-一个典型应用,在Window控件中打开新页面,如果传递的参数不正确,则首先提示参数不对然后关闭此弹出窗口。 -ExtAspNet.Alert.Show("参数错误!", String.Empty, ExtAspNet.ActiveWindow.GetCloseReference());...
通常应用等差数列输入法,先输入前二个值,定出自变量中数与数之间的步长,然后选中A2和A3两个单元格,使这二项变成一个带黑色边框的矩形,再用鼠标指向这黑色矩形的右下角的小方块“■”,当光标变成"+"后,按住...
带微信和QQ的汽车动画特效是一款很有特色的js动画特效代码,单击网页右下方的汽车,会自动行驶到网页底部中间,鼠标移到文字框上去时显示微信二维码,单击时会弹出QQ在线对话框。
如果您用右键点击这个圆点,程序将弹出一个右键菜单,选择其中的项目您将可以在右边的Sql语句操作窗口中得到单表的字段信息,创建(insert),查询(select),更新(update),删除语句(delete)及建表语句...
-一个典型应用,在Window控件中打开新页面,如果传递的参数不正确,则首先提示参数不对然后关闭此弹出窗口。 -ExtAspNet.Alert.Show("参数错误!", String.Empty, ExtAspNet.ActiveWindow.GetCloseReference());...
点选编译的快件按键,鼠标移上去会显示:Start compilation。 对这一自己设计的芯片进行打包。点file——create——create symbol file for current file, 如图9. 图9 生成一个和设计图名字一样的bsf文件,...
Press f8 for bbs popup 按F8弹出BBS网页 Press ALT+F2 to boot from system Recovery 按ALT+F2进入根录进行设置 PC2-4300 Dual Channel interleaved 双通道技术 Initializing usb Controllers..done 装载USB控制 ...
电子礼金簿软件,是我们根据国人的习俗... 2、在应用程序主界面上增加Tip提示,提示单击鼠标右键弹出主菜单,对新手起指引作用。 2015-05-31 1.8版发布,增加功能: 1、增加查找功能,可以根据姓名快速进行查找。
,在“动作”里面选择增加主机,软件会弹出一个对话框,要求输入用户名和密码,你就将你申请主页得来的名称以及密码输入,然后确定。Update Now!会让您输入本地初始地址,也就是那些网页资料在你 氐挠才躺厦娴哪柯...