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 相关文章推荐
jquery 模式对话框终极版实现代码
Sep 28 Javascript
javascript 子窗体父窗体相互传值方法
May 31 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
jquery实现文本框textarea自适应高度
Mar 09 Javascript
React.js入门学习第一篇
Mar 30 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
从0开始学Vue
Oct 27 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
php FPDF类库应用实现代码
2009/03/20 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
2020/09/10 Javascript
python实现的解析crontab配置文件代码
2014/06/30 Python
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
2014年卫生保健工作总结
2014/12/08 职场文书
用电申请报告范文
2015/05/18 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL