ASP教程 ASP.NET教程 PHP教程JSP教程 CGI/Perl教程 其他WEB语言 数据库编程 编程杂谈
返回首页
当前位置: 主页 > 网络编程 > JSP教程 >

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

时间:2010-06-15 12:35来源: 作者: 点击:
JavaScript教程:网页浮动定位提示效果,本来想做一个集合浮动定位和鼠标跟随的tooltips效果,但发现定位和鼠标跟随在一些关键的地方还是不同的,还是分开来吧。

本来想做一个集合浮动定位和鼠标跟随的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加一个事件,具体后面再说明。

爱设计教学网(www.2sheji.com)——为您所需,替您所想!
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
推荐内容