代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#info
{
position: absolute;
border: solid red 1px;
word-wrap: break-word;
width: 50px;
height: 100px;
overflow-y: scroll;
}
.level
{
border: solid 1px red;
}
table
{
padding:0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<a id="target2">aaaaaaaaaaaaaaa</a>
<div id="Div1" style="width: 50px; display: none;">
asdfasdfasdf<br />
adafsdfaf<br />
asdfasdfasdfasdddddddddddddaaaadfsdassssssssssssssss</div>
<table style="width: 100%; border: black solid 0px;" cellpadding="0" cellspacing="0">
<tr><td>
<table class="level" style="width: 100%; border: black solid 0px;" cellpadding="0" cellspacing="0">
<tr><td>ccc</td></tr>
<tr>
<td>
<div>
<div class="level" style="text-align: right;">
<a id="target">aaaaaaaaaaaaaaa</a>
<div id="info" style="width: 50px; display: none;">
asdfasdfasdf<br />
adafsdfaf<br />
asdfasdfasdfasdddddddddddddaaaadfsdassssssssssssssss</div>
</div>
</div>
</td>
</tr>
</table>
</td></tr></table>
</form>
<script type="text/javascript">
var target = document.getElementById("target");
var info = document.getElementById("info");
target.onmouseover = function()
{
var infoWidth = info.style.width ? parseInt(info.style.width) : 0;
info.style.display = "block";
// 如果内容超出浏览器右边框
if (infoWidth + event.x > document.body.clientWidth)
{
info.style.left = document.body.clientWidth - infoWidth;
}
else
{
info.style.left = event.x;
}
var infoHeight = info.offsetHeight;
// 如果高度超出浏览器高度
// if (event.y + infoHeight > document.body.clientHeight)
// {
// info.style.top = event.y - infoHeight;
// }
// else
// {
info.style.top = ComputeOffsetTop(target, target.offsetTop);
// }
// document.getElementById("msg").innerHTML = document.body.clientHeight + "aaaaaaaaaaa" + document.body.offsetHeight;
}
target.onmouseout = function()
{
info.style.display = "none";
}
info.onmouseover = function()
{
event.cancelBubble = true;
this.style.display = "";
}
info.onmouseout = function()
{
this.style.display = "none";
}
// 计算当前对象到document顶部的距离
// 参数说明：
// curObj ：当前对象
// curObjOffsetTop：当前对象距离顶部的距离
function ComputeOffsetTop(curObj, curObjOffsetTop)
{
// var curObjToTop = curObj.offsetTop;
var curObjToTop = curObjOffsetTop;
var tempParent = curObj.parentNode;
// 查找TD
while (tempParent
&& tempParent.tagName != "BODY"
&& tempParent.tagName != "TD")
{
tempParent = tempParent.parentNode;
}
// 如果找到TD
if (tempParent && tempParent.tagName == "TD")
{
curObjToTop += tdToTableOffsetTop(tempParent);
curObjToTop += ComputeOffsetTop(tempParent, 0); // 递归
}
return curObjToTop;
}
// 计算td顶部到table顶部的距离
function tdToTableOffsetTop(objTd)
{
var tdOffsetTop = objTd.offsetTop;
var tempParent = objTd.parentNode; // tr
tdOffsetTop += tempParent.offsetTop;
tempParent = tempParent.parentNode; // tbody or table
if (tempParent.tagName == "TBODY")
{
tdOffsetTop += tempParent.offsetTop;
tempParent = tempParent.parentNode;
}
tdOffsetTop += tempParent.offsetTop;
return tdOffsetTop;
}
</script>
</body>
</html>
<head runat="server">
<title></title>
<style type="text/css">
#info
{
position: absolute;
border: solid red 1px;
word-wrap: break-word;
width: 50px;
height: 100px;
overflow-y: scroll;
}
.level
{
border: solid 1px red;
}
table
{
padding:0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<a id="target2">aaaaaaaaaaaaaaa</a>
<div id="Div1" style="width: 50px; display: none;">
asdfasdfasdf<br />
adafsdfaf<br />
asdfasdfasdfasdddddddddddddaaaadfsdassssssssssssssss</div>
<table style="width: 100%; border: black solid 0px;" cellpadding="0" cellspacing="0">
<tr><td>
<table class="level" style="width: 100%; border: black solid 0px;" cellpadding="0" cellspacing="0">
<tr><td>ccc</td></tr>
<tr>
<td>
<div>
<div class="level" style="text-align: right;">
<a id="target">aaaaaaaaaaaaaaa</a>
<div id="info" style="width: 50px; display: none;">
asdfasdfasdf<br />
adafsdfaf<br />
asdfasdfasdfasdddddddddddddaaaadfsdassssssssssssssss</div>
</div>
</div>
</td>
</tr>
</table>
</td></tr></table>
</form>
<script type="text/javascript">
var target = document.getElementById("target");
var info = document.getElementById("info");
target.onmouseover = function()
{
var infoWidth = info.style.width ? parseInt(info.style.width) : 0;
info.style.display = "block";
// 如果内容超出浏览器右边框
if (infoWidth + event.x > document.body.clientWidth)
{
info.style.left = document.body.clientWidth - infoWidth;
}
else
{
info.style.left = event.x;
}
var infoHeight = info.offsetHeight;
// 如果高度超出浏览器高度
// if (event.y + infoHeight > document.body.clientHeight)
// {
// info.style.top = event.y - infoHeight;
// }
// else
// {
info.style.top = ComputeOffsetTop(target, target.offsetTop);
// }
// document.getElementById("msg").innerHTML = document.body.clientHeight + "aaaaaaaaaaa" + document.body.offsetHeight;
}
target.onmouseout = function()
{
info.style.display = "none";
}
info.onmouseover = function()
{
event.cancelBubble = true;
this.style.display = "";
}
info.onmouseout = function()
{
this.style.display = "none";
}
// 计算当前对象到document顶部的距离
// 参数说明：
// curObj ：当前对象
// curObjOffsetTop：当前对象距离顶部的距离
function ComputeOffsetTop(curObj, curObjOffsetTop)
{
// var curObjToTop = curObj.offsetTop;
var curObjToTop = curObjOffsetTop;
var tempParent = curObj.parentNode;
// 查找TD
while (tempParent
&& tempParent.tagName != "BODY"
&& tempParent.tagName != "TD")
{
tempParent = tempParent.parentNode;
}
// 如果找到TD
if (tempParent && tempParent.tagName == "TD")
{
curObjToTop += tdToTableOffsetTop(tempParent);
curObjToTop += ComputeOffsetTop(tempParent, 0); // 递归
}
return curObjToTop;
}
// 计算td顶部到table顶部的距离
function tdToTableOffsetTop(objTd)
{
var tdOffsetTop = objTd.offsetTop;
var tempParent = objTd.parentNode; // tr
tdOffsetTop += tempParent.offsetTop;
tempParent = tempParent.parentNode; // tbody or table
if (tempParent.tagName == "TBODY")
{
tdOffsetTop += tempParent.offsetTop;
tempParent = tempParent.parentNode;
}
tdOffsetTop += tempParent.offsetTop;
return tdOffsetTop;
}
</script>
</body>
</html>
