搜索:
首页 >> 下载中心 >> JavaScript源码 >> JavaScript 浮动定位提示效果

JavaScript 浮动定位提示效果

2009-7-7 作者:cloudgamer 来源:蓝色理想 投递文章

本来想做一个集合浮动定位和鼠标跟随的tooltips效果,但发现定位和鼠标跟随在一些关键的地方还是不同的,还是分开来吧。

这个效果本身难度不大,主要在程序结构和扩展中下了些功夫,务求用起来更方便,能用在更多的地方。

程序特点

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

完整打包实例下载

远程下载:FixedTips.rar(5.11 KB)

本地下载FixedTips.rar (5.11 KB)

效果演示,运行代码框

[提示:你可先修改部分代码,再按运行]

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

1   2  3  4  5  6 下一页 尾 页
Tags:JavaScript  浮动  定位  提示 
相关文章
手机版 JavaScript源码 Asp之家 Aspxhome.com
闽ICP备06017341号