JavaScript教程:网页浮动定位提示效果

核心提示： JavaScript,定位,浮动,提示,tooltips,FixedTips,Tip程序说明 Tip对象： Tip对象就是用来显示提示信息的容器，程序用Tip属性表示，JavaScript教程:网页浮动定位提示效果(2)，这个没什么要求，程序初始化时会对它进行一些设置，程序中用_trigg

JavaScript,定位,浮动,提示,tooltips,FixedTips,Tip

程序说明

Tip对象：

Tip对象就是用来显示提示信息的容器，程序用Tip属性表示。这个没什么要求，程序初始化时会对它进行一些设置。

首先进行下面设置：

this._cssTip.margin = 0;
this._cssTip.position = "absolute";
this._cssTip.visibility = "hidden";
this._cssTip.display = "block";
this._cssTip.zIndex = 99;
this._cssTip.left = this._cssTip.top = "-9999px";

其中margin设为0是为了避免一些定位问题，用visibility来隐藏而不是display是因为程序需要获取Tip的offsetWidth、offsetHeight，还需要设置left和top是避免因Tip占位出现的滚动条。

因为Tip可能会在其他定位元素里面，所以还要设两个offset修正参数：

var iLeft = iTop = 0, p = this.Tip.offsetParent;
while (!(p === document.body || p === document.documentElement)) {
　　　 iLeft += p.offsetLeft; iTop += p.offsetTop; p = p.offsetParent;
};
this._offsetleft = iLeft;
this._offsettop = iTop;

最后给Tip的mouseover加一个事件，具体后面再说明。

触发对象：

由于很多情况下都是一个Tip对应多个地方的提示，所以程序参考了 Table排序 的方式，添加了一个Add方法。

一个Tip实例化后，再用Add方法就可以对多个触发元素分别添加触发对象，程序中用_trigger属性表示当前的触发对象。

Add方法的一个必要参数是触发元素，就是触发显示Tip的元素。