使用Javascript、div层进行title等信息浮出显示，示例代码如下：
<html>
<head>
<style type="text/css">
.xstooltip
{
visibility: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 2;
font: normal 8pt sans-serif;
padding: 3px;
border: solid 1px;
}
</style>
</head>
<body>
<div id="test" onmouseover="xstooltip_show('tooltip_123', 'test', 0, 20);" onmouseout="xstooltip_hide('tooltip_123');">显示注释</div>
<div id="tooltip_123" class="xstooltip">
Time spent: 00:00:08<br/>
Page viewed: 4<br/>
Browser: Mozilla – 1.7.11<br/>
Operating system: Linux - i686 (x86_64)
</div>
</body>
</html>
<script>
function xstooltip_findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function xstooltip_findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
function xstooltip_show(tooltipId, parentId, posX, posY)
{
it = document.getElementById(tooltipId);
if ((it.style.top == '' || it.style.top == 0)
&& (it.style.left == '' || it.style.left == 0))
{
// need to fixate default size (MSIE problem)
it.style.width = it.offsetWidth + 'px';
it.style.height = it.offsetHeight + 'px';
img = document.getElementById(parentId);
// if tooltip is too wide, shift left to be within parent
if (posX + it.offsetWidth > img.offsetWidth) posX = img.offsetWidth - it.offsetWidth;
if (posX < 0 ) posX = 0;
x = xstooltip_findPosX(img) + posX;
y = xstooltip_findPosY(img) + posY;
it.style.top = y + 'px';
it.style.left = x + 'px';
}
it.style.visibility = 'visible';
}
function xstooltip_hide(id)
{
it = document.getElementById(id);
it.style.visibility = 'hidden';
}
</script>
分享到：
相关推荐
### 右下角浮出广告特效的实现 在网页设计中，为了提高用户体验以及增加网站互动性，常常会使用各种动态效果。其中一种常见的需求就是在页面的右下角添加一个可以浮动的广告框，用于展示企业的联系方式或者进行即时...
倒计时通常用于事件预告、促销活动等，它需要在服务器端和客户端之间进行交互。在JSP中，我们可以用Java的Date和Calendar类来计算时间差，然后通过JavaScript在客户端更新页面上的显示。以下是一个基本的步骤： 1. ...
全屏漂浮广告是一种网站常见的在线广告形式，通过使用JavaScript语言来实现，可以让广告在网页中进行自动漂浮移动，同时在鼠标悬停时停止移动。本文将详细解析使用JavaScript实现全屏漂浮广告的详细知识点，包括实现...
在frameset框架集中的使用需要注意，由于div无法浮在frameset之上，解决方案是在frameset外层添加iframe，将frameset嵌入iframe内。 此外，lhgdialog提供了一些预定义的对象，如`J.dialog.indoc`，`J.dialog.inwin`...
这个实践通常应用于弹出对话框、模态框或者提示信息。 首先，我们需要创建基本的HTML结构，这个结构包含一个用于显示内容的容器，以及一个触发打开或关闭窗口的按钮。例如： ```html <!DOCTYPE html> <title>...
本文将详细解析如何使用jQuery实现弹出遮罩层效果，这是一个常见的UI设计元素，常用于提示信息、加载等待或者对话框等场景。 首先，我们需要创建HTML结构。在提供的代码中，有两个按钮分别用于打开和关闭遮罩层，一...
标题“鼠标悬停向上滑出显示标题文字”指的是一个网页交互效果，当用户将鼠标光标悬停在某个元素上时，例如图片或按钮，该元素的标题或附加信息会以向上滑动的方式显示出来。这种效果常用于提高用户体验，减少页面的...
在HTML模板中，我们可以定义一个`div`，并使用Vue的`v-if`指令控制其是否显示。将其设置为绝对定位，以便我们可以根据鼠标的位置动态调整其位置： ```html <div id="mouse" v-if="showTooltip" class="tooltip"> ...
3. **信息浮窗**：可以创建带有阴影的“info windows”来显示地图上的相关信息。 4. **标注和图标**：使用`GMarker`和`GIcon`创建自定义标记，可以改变标记的外观和位置。 5. **路径绘制**：使用`GPolyline`可以绘制...
接下来，要实现弹出对话框，可以使用`jQuery UI`库中的`dialog`组件，或者使用纯CSS和JavaScript创建自定义对话框。如果使用jQuery UI，首先需要在项目中引入相应的库文件，然后初始化对话框： ```html ...
"jQuery SWT demo 弹窗"这个主题聚焦于如何利用jQuery来实现窗口或对话框的效果，通常这种效果在医疗和教育领域有广泛应用，比如展示警告信息、用户确认操作或者提供详细信息的浮窗。 jQuery的核心特性包括选择器、...
模态通常是一个浮于当前页面之上的弹出窗口，用于显示额外信息或接收用户输入。在Bootstrap中，模态通过简单的HTML结构、CSS样式和JavaScript插件来实现。这个教程的焦点在于创建一个没有过渡动画的模态，这样打开和...
JavaScript（Js）是一种广泛用于网页和网络应用的脚本语言，尤其在实现动态效果和交互性方面具有强大的功能。...在实际应用中，可以根据项目需求进行定制和优化，创造出更多元、更个性化的文字流动效果。
<title>文章内容页广告浮于左上角的解决办法</title> .container { display: table; width: 500px; background: #66FFCC; } .main { display: table-row; width: 100%; background: #669933; } .left ...
AmazeUI利用JavaScript实现了折叠面板的功能性交互，这部分代码没有在示例中给出，但通常是通过框架内置的插件来实现的。当用户点击标题时，JavaScript会控制相应的内容区域进行展开或折叠。 #### 四、使用场景及...
<title>页面标题</title> <!-- 页面主体内容 --> ``` - **解释**: - `<!DOCTYPE html>` 声明文档类型为HTML5。 - `<html>` 标签是根元素。 - `<head>` 包含文档元数据，如字符集、标题等。 - `<body>...
其中，`<style>`部分定义了不同元素的CSS样式，包括浮动窗口（`.divWindow`）、标题栏（`.divBar`）、改变大小的手柄（`.divChange`）、关闭按钮（`.divClose`）、标题文本（`.divTitle`）、内容区域（`.divContent`...