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

http://www.itjxue.com  2015-08-06 23:11  来源:未知  点击次数: 

本来想做一个集合浮动定位和鼠标跟随的tooltips效果,但发现定位和鼠标跟随在一些关键的地方还是不同的,还是分开来吧。
这个效果本身难度不大,主要在程序结构和扩展中下了些功夫,务求用起来更方便,能用在更多的地方。

程序特点

  1. 同一个提示框用在多个触发元素时,只需一个实例;
  2. 显示和隐藏分别有点击方式和触发方式选择;
  3. 能设置延时显示和隐藏;
  4. 有25种预设定位位置;
  5. 可在预设定位基础上,再自定义定位;
  6. 可设置自适应窗口定位;

完整实例下载(点击下载)

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

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加一个事件,具体后面再说明。

(责任编辑:IT教学网)

更多

推荐Javascript/Ajax文章