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高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
js子页面获取父页面数据示例
May 15 Javascript
JSON格式化输出
Nov 10 Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
浅谈jquery中next与siblings的区别
Oct 27 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
Angular2安装angular-cli
May 21 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 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 session和cookie使用说明
2010/04/07 PHP
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
解析ajax事件的调用顺序
2013/06/17 PHP
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
jQuery 美元符冲突的解决方法
2010/03/28 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
js快速排序的实现代码
2013/12/08 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
Python数组条件过滤filter函数使用示例
2014/07/22 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
华为python面试题
2016/05/03 面试题
vue路由实现登录拦截
2021/03/24 Vue.js
郭明义电影观后感
2015/06/08 职场文书
文化大革命观后感
2015/06/17 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
调研报告的主要写法
2019/04/18 职场文书
Java移除无效括号的方法实现
2021/08/07 Java/Android
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers