类似于当当网的发货以后的那个发货反馈，鼠标移上去后自动会弹出一个框，位置随位置的改变而改变，代码如下：
<!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
>
转载于:https://www.cnblogs.com/yssoft/archive/2009/05/30/1492334.html
274
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
