考试首页 | 考试用书 | 培训课程 | 模拟考场 | 考试论坛  
  当前位置:设计制作 > JavaScript > 文章内容
  

如何定制页面提示信息(tooltips)

 [ 2017年6月23日 ] 【

一个页面上往往有很多链接、按钮,如果没有任何提示信息,会让人很迷茫。虽然IE也带提示功能,只要给title属性赋值,如下代码 自带的提示这样的提示很单调,鼠标移上去的时候显示出来,当鼠标在上面移动的时候,提示信息不会跟随,对比下面自定义的提示信息,差别就很明显,所以自定义的提示信息是很有必要的。

把鼠标放到链接上看提示信息如何定制提示信息,说起来很简单,先画出提示信息层,然后定位到目标对象。下面把实现分三部来说明:

1)绘制信息层

有两种方式,一种是静态,把层的html代码写在文档中,另外一种是动态,运用javascript脚本动态的创建层。静态方式简单,不灵活,动态的灵活,但比较困难,需要熟悉脚本和Dom结构,下面的代码是动态方式创建提示层

function createDivTooltip()

{

var pTips = document.createElement('p');//create p element

pTips.id='tooltip';

pTips.style.display='none'//invisible

document.body.appendChild(pTips);

}

2)定位信息层

function locate(e)

{ e=e||window.event;

var pTips = document.getElementById('tooltip');

var mousePos=getMousePosition(e);//get the coordinate of the mouse

pTips.style.top=mousePos.top-12+"px";

pTips.style.left=mousePos.left-8+"px";

}

关于如何定位鼠标在文档中的位置请参考《获取鼠标的坐标》


本文纠错】【告诉好友】【打印此文】【返回顶部
将考试网添加到收藏夹 | 每次上网自动访问考试网 | 复制本页地址,传给QQ/MSN上的好友 | 申请链接 | 意见留言 TOP
关于本站  网站声明  广告服务  联系方式  站内导航  考试论坛
Copyright © 2007-2013 中华考试网(Examw.com) All Rights Reserved