JavaScript Title、alt提示(Tips)实现源码解读


Posted in Javascript onDecember 12, 2010

而对于图片标签img也有一个alt属性可以起到类似的作用。但很显然这种提示框太单调了,为此有人用JavaScript实现了漂亮的提示框效果,这种效果常用在WEB游戏中,其中下图的网易邮箱与迅雷影视页面就用到这种效果,虽然彼此实现效果有些差异,但整体实现思路是不变的。为了方便大家了解实现的细节,以方便定制自己想要的效果,我上网找了一段不错的源码,并对其进行了详细的注释,希望对大家有帮助。

JavaScript Title、alt提示(Tips)实现源码解读
JavaScript Title、alt提示(Tips)实现源码解读

含注释代码:
/*********************************************** 
一个JavaScript Title、alt提示(Tips)源码解读 
代码注释:唐国辉 
作者博客:http://webflash.cnblogs.com 
***********************************************/ 
//定义getElementById快捷方式 
function $(obj) 
{ 
if(typeof(obj)=='object') 
{ 
return obj; 
} 
else 
{ 
return document.getElementById(obj); 
} 
} 
//定义document.write快捷方式,代替复杂的DOM操作 
function $P(str) 
{ 
document.write(str); 
} 
//脚本错误屏蔽 
window.onerror=function () 
{ 
return true; 
}; 
/* 
定义变量: 
pltsPop(提示内容文字,来自对象的alt或title属性,不包含HTML) 
toolTip(提示内容DOM对象,即后面定义的content变量) 
pltsPoptop(上方提示标题DOM对象) 
pltsPopbot(下方提示标题DOM对象) 
topLeft(左上角提示标题DOM对象) 
botLeft(左下方提示标题DOM对象) 
topRight(右上角提示标题DOM对象) 
botRight(右下方提示标题DOM对象) 
*/ 
var pltsPop,toolTip,pltsPoptop,pltsPopbot,topLeft,botLeft,topRight,botRight; 
//设置提示窗口相对提示对象的位置偏移量 
var pltsoffsetX=10; 
var pltsoffsetY=15; 
var pltsTitle=""; 
//创建一个绝对定位的隐藏图层 
$P('<div id=\"pltsTipLayer\" style="display:none; position:absolute; z-index:10001" mce_style="display:none; position:absolute; z-index:10001"></div>'); 
//把刚创建的层对象赋值给一个变量,此语句一定要出现在层创建之后 
var pltsTipLayer=$('pltsTipLayer'); 
//定义鼠标移到对象上时处理函数,主要提取alt或title属性值,并初始化提示框HTML及样式 
function PltsMouseOver(ev) 
{ 
//兼容不同浏览器的事件和对象获取 
var Event=window.event||ev; 
var o=Event.srcElement||Event.target; 
//如果对象alt属性存在并且不等于空,就把它的值存到dypop属性,并清空当前alt内容 
if(o.alt!=null&&o.alt!="") 
{ 
o.dypop=o.alt; 
o.alt=""; 
} 
//如上,对具有title属性的对象作同样的判断和处理,清空title属性值是让对象默认的提示效果失效 
if(o.title!=null&&o.title!="") 
{ 
o.dypop=o.title; 
o.title=""; 
} 
pltsPop=o.dypop; 
if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined") 
{ 
//把上面创建的提示层显示出来,暂时移到左边很远,虽然显示但用户看不到 
pltsTipLayer.style.left=-1000; 
pltsTipLayer.style.display=''; 
/* 
格式化提示信息,把其中的\n换成<br/>,比如像下面这样定义title值,显示出来会是作者和性别各一行,因为Tom和Sex之间有\n: 
<div title="Author:Tom 
Sex:male">Article title...</div> 
*/ 
var Msg=pltsPop.replace(/\n/g,"<br/>"); 
Msg=Msg.replace(/\0x13/g,"<br/>"); 
//定义正则表达式检查提示内容是否含有类似这样的内容“{提示标题}”,而且{}和{{}是排除在处的,如果没有就默认用“简介”作为提示标题 
var re=/\{(.[^\{]*)\}/ig; 
if(!re.test(Msg)) 
{ 
pltsTitle="<label style="\" mce_style="\""color:#000\">简介</label>"; 
} 
else 
{ 
re=/\{(.[^\{]*)\}(.*)/ig; 
//提取{}中的内容 
pltsTitle=Msg.replace(re,"$1")+" "; 
//把{内容},包括{}在内的内容替换为空,得到最终提示正文的内容 
re=/\{(.[^\{]*)\}/ig; 
Msg=Msg.replace(re,""); 
} 
//定义提示框内容Html与Style,并把获得的相关内容放到对应变量中 
var content="<dl id=\"toolTip\" style="\" mce_style="\""-moz-opacity:0.85;opacity:0.85;FILTER:alpha(opacity=85);padding:2px;background:#fff;\"><dd id=\"pltsPoptop\" class=\"toolTipTitle\" style="\" mce_style="\""line-height:20px;\"><p id=\"topLeft\" class=\"left\"><b><label style="\" mce_style="\""color:#ffffff\">?</label>"+pltsTitle+"</b></p><p id=\"topRight\" class=\"right\" style="\" mce_style="\""display:none\"><b>"+pltsTitle+"<label style="\" mce_style="\""color:#ffffff\">?</label ></b></p></dd><dd class=\"toolTipMsg\">"+Msg+"</dd><dd id=\"pltsPopbot\" style="\" mce_style="\""display:none\" class=\"toolTipTitle\"><p id=\"botLeft\" class=\"left\"><b><label style="\" mce_style="\""color:#ffffff\">?</label >"+pltsTitle+"</b></p><p id=\"botRight\" class=\"right\" style="\" mce_style="\""display:none\"><b>"+pltsTitle+"<label style="\" mce_style="\""color:#ffffff\">?</label></b></p></dd></dl>"; 
pltsTipLayer.innerHTML=content; 
toolTip=$("toolTip"); 
pltsPoptop=$("pltsPoptop"); 
pltsPopbot=$("pltsPopbot"); 
topLeft=$("topLeft"); 
botLeft=$("botLeft"); 
topRight=$("topRight"); 
botRight=$("botRight"); 
//设置提示框宽度,它的大小是提示框自身大小和浏览器可见窗口大小一半两者中的最小值,即在浏览器窗口小过提示框本身宽度后,会自动调整提示框大小到一个新的宽度 
toolTip.style.width=Math.min(pltsTipLayer.clientWidth,document.documentElement.clientWidth/2.2)+"px"; 
} 
else 
{ 
pltsTipLayer.innerHTML=''; 
pltsTipLayer.style.display='none'; 
} 
} 
//定义鼠标在对象上移动时处理函数,每移动一像素触发一次事件 
function PltsMouseMove(ev) 
{ 
if(pltsTipLayer.innerHTML=='') 
return true; 
var Event=window.event||ev; 
//获取光标当前X、Y坐标 
var MouseX=Event.clientX; 
var MouseY=Event.clientY; 
//获取提示框宽高度 
var popHeight=pltsTipLayer.clientHeight; 
var popWidth=pltsTipLayer.clientWidth; 
//如果当前光标Y坐标+提示框Y轴偏移量+提示框高度>当前窗口可见高度,一般处理窗口中下方要提示的对象,比如页脚有一个链接需要提示时就会是这种情况,此时考虑使用下方标题 
if(MouseY+pltsoffsetY+popHeight>document.documentElement.clientHeight) 
{ 
//提示框显示在要提示对象上方时需要一个额外值popTopAdjust作为提示框最终定位的依据 
popTopAdjust=-popHeight-pltsoffsetY*1.5; 
pltsPoptop.style.display="none"; 
pltsPopbot.style.display=""; 
} 
else 
{ 
popTopAdjust=0; 
pltsPoptop.style.display=""; 
pltsPopbot.style.display="none"; 
} 
//判断使用左标题还是右标题 
if(MouseX+pltsoffsetX+popWidth>document.documentElement.clientWidth) 
{ 
popLeftAdjust=-popWidth-pltsoffsetX*2; 
topLeft.style.display="none"; 
botLeft.style.display="none"; 
//下面两个标题都显示,其实最终看到的只有一个位置上的标题,因为topRight是pltsPoptop的子元素,如果pltsPoptop不显示,topRight显示也是看不到的,botLeft同理 
topRight.style.display=""; 
botRight.style.display=""; 
} 
else 
{ 
popLeftAdjust=0; 
topLeft.style.display=""; 
botLeft.style.display=""; 
topRight.style.display="none"; 
botRight.style.display="none"; 
} 
//把综合处理得到的提示框最终位置值设置到对象,其中scrollTop是网页被卷去的高度,因为style.top是相对整个文档的而不是浏览器窗口,所以要算上滚动隐藏的高度,scrollLeft同理 
pltsTipLayer.style.left=MouseX+pltsoffsetX+document.documentElement.scrollLeft+popLeftAdjust+"px"; 
pltsTipLayer.style.top=MouseY+pltsoffsetY+document.documentElement.scrollTop+popTopAdjust+"px"; 
return true; 
} 
//定义事件绑定函数 
function PltsInit() 
{ 
document.onmouseover=PltsMouseOver; 
document.onmousemove=PltsMouseMove; 
} 
//调用事件绑定函数 
PltsInit();

调用方法:把上面的代码存到一个外部独立的JS文件中,然后在网页页面中包含这个JS文件,最后给需要提示的对象加上title属性,图片可以加alt属性就可以了。举例:<a href="#" title="{完整标题}完整标题文字">缩写标题</a> 或 <img src="#" alt="图片提示" />

相关链接:
1、http://www.cnblogs.com/czh-liyu/archive/2007/12/30/1021146.html
2、http://boxover.swazz.org
3、http://blog.csdn.net/lanmao100/archive/2008/10/31/3191767.aspx

Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 Javascript
js中的值类型和引用类型小结 文字说明与实例
Dec 12 #Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 #Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 #Javascript
JavaScript下利用fso判断文件是否存在的代码
Dec 11 #Javascript
jQuery ul标签下拉菜单演示代码
Dec 11 #Javascript
基于jquery的修改当前TAB显示标题的代码
Dec 11 #Javascript
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 #Javascript
You might like
PHP中的类-什么叫类
2006/11/20 PHP
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
php经典趣味算法实例代码
2020/01/21 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
javascript实现动态标签云
2015/10/16 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
Vue实现背景更换颜色操作
2020/07/17 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
django 实现电子支付功能的示例代码
2018/07/25 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
党员批评与自我批评范文
2014/09/23 职场文书
机动车交通事故协议书
2015/01/29 职场文书
期末个人总结范文
2015/02/13 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
公司开除员工通知
2015/04/22 职场文书
永不妥协观后感
2015/06/10 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
话题作文之成长
2019/12/09 职场文书
python非标准时间的转换
2021/07/25 Python
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis