悬浮提示筐
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>演示</title>
<link href="fo.css" rel="stylesheet" type="text/css">
<SCRIPT language=JavaScript1.2>
<!--
function Show(divid) {
divid.filters.revealTrans.apply();
divid.style.visibility = "visible";
divid.filters.revealTrans.play();
}
function Hide(divid) {
divid.filters.revealTrans.apply();
divid.style.visibility = "hidden";
divid.filters.revealTrans.play();
}
//-->
</SCRIPT>
</head>
<body>
<table>
<tr><br><br><br> <td width=400 >
<p align="right">效果:</td><td bgcolor="#FF9999">
<a onmouseover="Show(act01)" onMouseOut="Hide(act01)" style="cursor:hand;"><font color="#FFFFFF">
鼠标移过来</font></a>
<DIV class="tips" id="act01" align="left"><font color="#FF0000">每次刷新都不一样</font><br>快刷新试试</DIV>
</tr></td>
<tr><td width=400 height=30>
<p align="center"></td><td></td>
</tr>
</table>
</body>
</html>
--fo.css样式--
a:link { text-decoration: none;color: #0F0F0F;}
a:visited { text-decoration: none; color: #0F0F0F}
a:hover {text-decoration: underline;color: #0F0F0F;}
BODY {
FONT-SIZE: 9pt;
SCROLLBAR-HIGHLIGHT-COLOR: buttonface;
SCROLLBAR-SHADOW-COLOR: buttonface;
SCROLLBAR-3DLIGHT-COLOR: buttonhighlight;
SCROLLBAR-TRACK-COLOR: #eeeeee;
SCROLLBAR-ARROW-COLOR: #620202;
SCROLLBAR-DARKSHADOW-COLOR: buttonshadow;
color: #0F0F0F;
background-color: #56BDF5;
margin: 0px;
}
td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
line-height: 150%;
}
.tips {
FILTER: revealTrans(transition=26,duration=0.5) blendTrans(duration=0.5);
VISIBILITY: hidden;
POSITION: absolute;
BACKGROUND-COLOR: #FFFFFF;
width:128px;
line-height:18px;
border: 1px solid #666666;
color:#616161;
padding: 4px;
font-size: 12px;
}
第二种方式:
function showPic(sUrl) {
var x, y;
x = event.clientX;
y = event.clientY;
document.getElementById("Layer1").style.left = x + 10;
document.getElementById("Layer1").style.top = y;
document.getElementById("Layer1").innerHTML = "<div style='background-color:#FFEFD5;filter:alpha(opacity=75);'>" + sUrl + "</div>";
document.getElementById("Layer1").style.display = "block";
}
function hiddenPic() {
document.getElementById("Layer1").innerHTML = "";
document.getElementById("Layer1").style.display = "none";
}
<label onmousemove="showPic('悬浮内容')" onmouseout="hiddenPic()">Test</label>
如果有滚动条,有时则会影响显示位置.
可以适当加上滚动条的位置.:
获取滚动条位置：
document.body.scrollTop （滚动条离页面最上方的距离）
document.body.scrollLeft （滚动条离页面最左方的距离）
当网页最前面有以下内容：
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
document.documentElement.scrollTop （滚动条离页面最上方的距离）
document.documentElement.scrollLeft （滚动条离页面最左方的距离）
