使用JavaScript实现透明提示框

需积分: 10 99 浏览量更新于2024-09-13 收藏 16KB TXT 举报

"该资源提供了一种使用JavaScript实现网页上的透明信息提示框（tooltip）的方法。JavaScript代码中包含了对不同浏览器版本的兼容处理，并定义了提示框的样式和位置参数。" 在网页开发中，提示框（tooltip）常用于显示鼠标悬停在某元素上时的额外信息。这个资源主要介绍了如何利用JavaScript来创建一个透明的提示框。以下是对关键知识点的详细解释： 1. **JavaScript变量声明**：`var pltsPop`, `pltsoffsetX`, `pltsoffsetY`, `pltsPopbg`, 和 `pltsPopfg` 分别用于存储提示框对象、提示框相对于鼠标的位置偏移量以及提示框的背景和前景颜色。 2. **HTML嵌入**：`<div id="pltsTipLayer" style="display:none;position:absolute;z-index:10001"></div>` 是用于创建提示框的基本结构，它的初始状态为隐藏（`display:none`），定位方式为绝对（`position:absolute`），并设置了较高的层叠顺序（`z-index:10001`），确保提示框始终位于其他元素之上。 3. **浏览器检测**：通过检查`navigator.userAgent`、`navigator.productSub`、`document.getElementById`等属性，判断用户使用的浏览器类型，如IE4、IE5、NN4（Netscape Navigator 4）、NN6（Netscape Navigator 6或更高版本）以及DOM支持情况，以便进行兼容性处理。 4. **CSS滤镜检测**：`cnstat_cssFilters`用于检测浏览器是否支持CSS滤镜，这在旧版的IE中用于实现透明效果。 5. **JavaScript函数**：虽然这部分代码没有包含完整的函数，但可以看出它可能会包含一些用于显示、隐藏提示框，以及根据鼠标位置更新提示框位置的函数。例如，`cnstat_mx`、`cnstat_my`可能用于存储鼠标坐标，`cnstat_scl`和`cnstat_sct`可能涉及提示框的尺寸和位置计算。 6. **样式应用**：`cnstat_Style`和`Text`数组可能是用于动态创建CSS样式的，而`cnstat_Count`、`cnstat_sbw`、`cnstat_move`等变量可能与计算和更新提示框的样式有关。 7. **事件处理**：虽然具体实现未给出，但可以推测代码会监听鼠标移动事件（`onmousemove`），当鼠标悬停在特定元素上时，显示提示框，并根据鼠标位置调整提示框的位置。 8. **提示框内容**：`pltsTitle`用于存储提示框显示的内容，这可以通过JavaScript动态设置或从HTML元素的属性中获取。这段JavaScript代码提供了一个跨浏览器的透明提示框解决方案，它利用JavaScript和CSS来创建、定位和风格化提示框，同时也考虑了不同浏览器的兼容性问题。为了完整实现功能，还需要编写显示和隐藏提示框的逻辑，以及根据鼠标位置更新提示框位置的代码。

<br>
<script language = "JavaScript" type="text/javascript">
var pltsPop=null;
var pltsoffsetX = 10;
var pltsoffsetY = 15;
var pltsPopbg="#FFFFEE";
var pltsPopfg="#CCCCD4";
var pltsTitle="";
document.write('<div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"></div>');
<!--
var cnstat_ua = navigator.userAgent
var cnstat_ps = navigator.productSub
var cnstat_dom = (document.getElementById)? 1:0
var cnstat_ie4 = (document.all&&!cnstat_dom)? 1:0
var cnstat_ie5 = (document.all&&cnstat_dom)? 1:0
var cnstat_nn4 =(navigator.appName.toLowerCase() == "netscape" && parseInt(navigator.appVersion) == 4)
var cnstat_nn6 = (cnstat_dom&&!cnstat_ie5)? 1:0
var cnstat_sNav = (cnstat_nn4||cnstat_nn6||cnstat_ie4||cnstat_ie5)? 1:0
var cnstat_cssFilters = ((cnstat_ua.indexOf("MSIE 5.5")>=0||cnstat_ua.indexOf("MSIE 6")>=0)&&cnstat_ua.indexOf("Opera")<0)? 1:0
var cnstat_Style=[],Text=[],cnstat_Count=0,cnstat_sbw=0,cnstat_move=0,cnstat_hs="",cnstat_mx,cnstat_my,cnstat_scl,cnstat_sct,cnstat_ww,cnstat_wh,cnstat_obj,cnstat_sl,cnstat_st,cnstat_ih,cnstat_iw,cnstat_vl,cnstat_hl,cnstat_sv,cnstat_evlh,cnstat_evlw,cnstat_tbody
var cnstat_HideTip = "eval(cnstat_obj+cnstat_sv+cnstat_hl+';'+cnstat_obj+cnstat_sl+'=0;'+cnstat_obj+cnstat_st+'=-800')"
var cnstat_doc_root = ((cnstat_ie5&&cnstat_ua.indexOf("Opera")<0||cnstat_ie4)&&document.compatMode=="CSS1Compat")? "document.documentElement":"document.body"
var cnstat_PX = (cnstat_nn6)? "px" :"" //此处px没有改为cnstat_px
if(cnstat_sNav) {
window.onresize = cnstat_ReloadTip
document.onmousemove = cnstat_MoveTip
if(cnstat_nn4) document.captureEvents(Event.MOUSEMOVE)
}
if(cnstat_nn4||cnstat_nn6) {
cnstat_mx = "e.pageX"

剩余9页未读，继续阅读

blackray33

粉丝: 0
资源: 3

使用JavaScript实现透明提示框

qt 透明提示框

JavaScript 带透明度的漂亮窗口

JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

弹出提示框后整个页面变暗，包括提示框也是暗的，我需要的是提示框是亮的，怎么操作

uCharts提示框文字前面的图标怎么隐藏不显示

D3 Tip 半透明悬浮窗样式

fabric.js 拖动框多选时给每个被选中的元素有提示框

echarts提示框浮层文字输入阴影不显示

写一个提示框要求弹出时背景模糊

echarts提示框浮层文字没有阴影

最新资源