鼠标弹层 - sweting

类似于当当网的发货以后的那个发货反馈，鼠标移上去后自动会弹出一个框，位置随位置的改变而改变，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>框框随着鼠标点击的元素的位置改变而改变</title>

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>

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>

</div>

</body>

</html>

posted on 2009-11-27 15:43 sweting 阅读(175) 评论(0) 收藏举报

刷新页面返回顶部