如何实现这样显示层的功能！！！！！！！！！！！！！！！！！！(多图)急！！！！！

修改上面的html 代码才给分, 最好带中文注释

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

时间有点紧，没完全符合要求，给个思路吧<div id="div1" style="position:absolute; border: solid 1px blue ;width:200;height:100;visibility:hidden"></div>
<center>
 
<table border=1>
<tr>
<td bgcolor=red> hello </td>
 <td id="td1" bgcolor=blue style="cursor:hand"
 onMouseOver="show(document.all.div1)"
onMouseOut="document.all.div1.style.visibility='hidden'" >
 显示层
 </td>
<script language="javascript">
//得到控件的绝对位置
function getPos(cell)
{
var pos = new Array();
var t=cell.offsetTop;
var l=cell.offsetLeft;
while(cell=cell.offsetParent)
{
t+=cell.offsetTop;
l+=cell.offsetLeft;
}
pos[0] = t;
pos[1] = l;
return pos;
}
function show(oDiv)
{
var oTd = event.srcElement;
var arrPos = new Array();
arrPos = getPos(oTd);
oDiv.style.right = arrPos[1] + oTd.style.width;
if(arrPos[0] >= oDiv.offsetHeight)
oDiv.style.top = arrPos[0] - oDiv.offsetHeight - 5;
else
oDiv.style.top = arrPos[0] + oTd.offsetHeight + 5;
oDiv.style.visibility="visible";
}
</script>
 <td bgcolor=red> hello </td>
</tr>
</table>
</center>
<script>
function show()//显示层
{
 dypopLayer.innerText = "这个是要显示的层";
 MouseX=event.x;//鼠标位置
 MouseY=event.y;
 popWidth=dypopLayer.clientWidth;//定义层位置
 popHeight=dypopLayer.clientHeight;
 if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
 else popLeftAdjust=0;
 if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
 else popTopAdjust=0;
 dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
 dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
}
function noshow()//隐藏层
{
 dypopLayer.innerText = "";}
</script>
 
 <div id="div1" style="position:absolute; border: solid 1px blue ;width:200px;height:100px ;visibility:hidden " > </div>

<center>
<div id="dypopLayer" style='position:absolute;z-index:1000;border: solid 1px blue ;'></div>
<table border=1>
<tr>
<td bgcolor=red > hello </td><td bgcolor=blue style="cursor:hand" ><div id="td1" onmouseover="show()" onmouseout="noshow()" >
显示层
</div>
</td><td bgcolor=red > hello </td>
</tr>
</table></center>
TO : woyingjie(woyingjie)   你所显示的层是跟着鼠标的位置移动的, 没有对齐 td1  元素 ,   LxcJie(肖冲)  就做到层可以对齐 td1  , 但他的只能在td1上面显示,不能在td1 的下面显示 .
没有人想拿分？？？？   给出如何判断 td1 下面和上面的位置是否能够 div1 的代码也好呀！！
我来给出正确的答案：
<script>
function chk()
{// alert(event.clientY-event.offsetY);//alert(td1.offsetWidth);
//alert(document.body.clientHeight);//得到从窗口顶部到 td1 底线位置
var tdh= event.clientY-event.offsetY+td1.offsetWidth;

//窗口的高度减去 td1 底线的位置得到 td1 下面的位置
var offh= document.body.clientHeight-tdh;//alert( event.clientY-event.offsetY+td1.offsetWidth);

//判断是否大于层的高度
 if (offh > 70 )
{
div1.style.top=document.body.scrollTop+ event.clientY-event.offsetY+td1.offsetWidth-29;
div1.style.left=document.body.scrollLeft+ event.clientX-event.offsetX-150;
div1.style.visibility="visible"
return;
}
//获得从td1到窗口顶部的高度var offt=event.clientY-event.offsetY;
//alert(offt);
//判断顶部的高度
if (offt>110){div1.style.top=document.body.scrollTop+ event.clientY-event.offsetY-110;
div1.style.left=document.body.scrollLeft+ event.clientX-event.offsetX-150;
div1.style.visibility="visible"
return;}//如果顶部和底部都不够就在下面显示div1.style.top=document.body.scrollTop+ event.clientY-event.offsetY+td1.offsetWidth-29;
div1.style.left=document.body.scrollLeft+ event.clientX-event.offsetX-150;
div1.style.visibility="visible"
return;
}</script><div id="div1" style="position:absolute; border: solid 1px blue ;width:200;height:100;visibility:hidden"></div>
<center>
 
<table border=1>
<tr>
<td bgcolor=red> hello </td>
 <td id="td1" bgcolor=blue style="cursor:hand"
 >
 显示层
 </td>

 <td bgcolor=red> hello <input type=button value=dfd onclick="chk()" ></td>
</tr>
</table>
</center>

如何实现这样 显示层 的功能 ！！！！！！！！！！！！！！！！！！(多图)急！！！！！

解决方案 »

如何实现这样显示层的功能！！！！！！！！！！！！！！！！！！(多图)急！！！！！