javascript 实现的
在表格里面展示信息总是不够时，可以用悬浮展示信息，但是如果在表格的一行里超过一半时进行显示就需要控制显示层的位置！
首先看看效果:
在表格每行的左半部分时，层就显示在鼠标右边
在表格的右边时：层就显示在鼠标的左边
<!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>
<script language="javascript" type="text/javascript">
function gain(obj,str)
{
var mx = str.clientX;//鼠标当前位置
var width=document.body.clientWidth/2; //获取文档的一半
// obj.offsetLeft 是获取到左边文档的距离
//alert("我是获取的宽度"+);
var divWidth=document.getElementById("display").style.width;
var index=divWidth.indexOf("p");
divWidth=divWidth.substring(0,index); //获取要显示div的宽度
if(mx<width)
{
var temp=document.getElementById("display").style;
temp.display="block"
temp.left=obj.offsetLeft+ (document.body.clientWidth*0.1);
temp.top=str.clientY;
}
else
{
var temp=document.getElementById("display").style;
temp.display="block"
temp.left=obj.offsetLeft-divWidth;
temp.top=str.clientY;
}
}
function undisplay()
{
document.getElementById("display").style.display="none";
}
</script>
<style type="text/css">
<!--
#display {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #F00;
border-right-color: #F00;
border-bottom-color: #F00;
border-left-color: #F00;
}
-->
</style>
</head>
<body>
<table width="100%" border="1">
<tr>
<td width="10%" onmouseover="gain(this,event)" onmouseout="undisplay()"><div align="center">11111</div></td>
<td width="10%" onmouseover="gain(this,event)" onmouseout="undisplay()"><div align="center">22222</div></td>
<td width="10%" onmouseover="gain(this,event)" onmouseout="undisplay()"><div align="center">33333</div></td>
<td width="10%" onmouseover="gain(this,event)" onmouseout="undisplay()"><div align="center">44444</div></td>
<td width="10%" onmouseover="gain(this,event)" onmouseout="undisplay()"><div align="center">55555</div></td>
<td width="10%" onmouseover="gain(this,event)" onmouseout="undisplay()"><div align="center">66666</div></td>
<td width="10%" onmouseover="gain(this,event)" onmouseout="undisplay()"><div align="center">77777</div></td>
<td width="10%" onmouseover="gain(this,event)" onmouseout="undisplay()"><div align="center">88888</div></td>
<td width="10%" onmouseover="gain(this,event)" onmouseout="undisplay()"><div align="center">99999</div></td>
<td width="10%" onmouseover="gain(this,event)" onmouseout="undisplay()"><div align="center">10101</div></td>
</tr>
<tr>
<td width="10%" onmouseover="gain(this,event)" onmouseout="undisplay()"><div align="center">11111</div></td>
<td width="10%" onmouseover="gain(this,event)" onmouseout="undisplay()"><div align="center">22222</div></td>
<td width="10%" onmouseover="gain(this,event)" onmouseout="undisplay()"><div align="center">33333</div></td>
<td width="10%" onmouseover="gain(this,event)" onmouseout="undisplay()"><div align="center">44444</div></td>
<td width="10%" onmouseover="gain(this,event)" onmouseout="undisplay()"><div align="center">55555</div></td>
<td width="10%" onmouseover="gain(this,event)" onmouseout="undisplay()"><div align="center">66666</div></td>
<td width="10%" onmouseover="gain(this,event)" onmouseout="undisplay()"><div align="center">77777</div></td>
<td width="10%" onmouseover="gain(this,event)" onmouseout="undisplay()"><div align="center">88888</div></td>
<td width="10%" onmouseover="gain(this,event)" onmouseout="undisplay()"><div align="center">99999</div></td>
<td width="10%" onmouseover="gain(this,event)" onmouseout="undisplay()"><div align="center">10101</div></td>
</tr>
</table>
<div id="display" style="width:200px; border-bottom-width:thin; position:absolute;" >
safdafsafsafadfsafafsaf
safdafsafsafadfsafafsaf
safdafsafsafadfsafafsaf
safdafsafsafadfsafafsaf
</div>
</body>
</html>
浙公网安备 33010602011771号