悬浮提示筐
<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 （滚动条离页面最左方的距离）
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构