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

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

  

含注释代码:


代码如下:

/***********************************************
  一个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

(0)

相关推荐

  • javascript tips提示框组件实现代码

    tip.js 复制代码 代码如下: function tips(obj,tag){ var tip = document.createElement('div'),arg= arguments[2],left,top; //创建tipbox var bodywid= document.documentElement.clientWidth; //这里也可以替换为容器的宽度$(id).outerWidth(); var abs = obj.getElementsByTagName(tag); ti

  • 轻量级 JS ToolTip提示效果

    鼠标经过出现的提示效果,比title更漂亮,可订制.JS: 复制代码 代码如下: //---------------------------tooltip效果 start----------------------------------- //获取某个html元素的定位 function GetPos(obj){ var pos=new Object(); pos.x=obj.offsetLeft; pos.y=obj.offsetTop; while(obj=obj.offsetParent

  • 新鲜出炉的js tips提示效果

    兼容性已经测过:IE6\IE7\IE8\FF3\CHROME10 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • JS组件Bootstrap实现弹出框和提示框效果代码

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三种类型分别来介绍下它们的使用. 一.Bootstrap弹出框

  • js提示信息jtip封装代码,可以是图片或文章

    话说本人转行做了前端,于是乎每天都是些div+css啥的.今天就讲讲这个用js实现类似于A标签里的title或alt功能,至于这个功能有什么好处呢,你听我慢慢道来,首先title或alt属性所带来的提示太过于简单,样式也无法修改,而且鼠标要移到元素上等待1至3秒钟才会显示出来,内容也只有简单的文字,无法加入html内容.所以呢,综上所述,只好自己封装一个属于自己的js提示框了.或许你会说jquery不是有个jtip组件吗?不错,那说明你的思想还挺前卫.如果用得习惯的话那就用吧,反正用谁不是用呢?

  • jquery.cvtooltip.js 基于jquery的气泡提示插件

    序 1.插件名cvtooltip中的cv是ChinaValue的首字母缩写,而tooltip就是提示啦. 2.适用于新功能的提示,引导用户的提示,即时类消息的提示,操作失败提示(操作成功了也没人拦着)等等等,使用css实现,不附带任何图片文件. 3.目前发现的问题,在Chorme中表现的不给力,是由于Chrome对页面的解析与IE和FF不同,导致jquery的position或者offset返回值不同. 4.该插件依然是练习之作,一人之力,错误难免. 实例演示 1.载入页面的同时,气泡提示也显示

  • JS仿百度搜索自动提示框匹配查询功能

    1. 添加动态加载css文件 不需要引入css css全部在JS动态生成.2. 不需要额外的标签 只需要一个input输入框 并且默认指定一个class类名为 "inputElem" 当然也可以自己配置参数 还需要一个当前父级容器增加一个默认类名 parentCls(也可以自己配置),因为输入框匹配值后需要一个隐藏域 所以需要隐藏域增加一个class "hiddenCls" 当然也支持自己配置参数. 如下代码: 复制代码 代码如下: <div class=&q

  • JavaScript基础教程之alert弹出提示框实例

    alert 命令弹出一个提示框 为便于对 JavaScript 有一个直观的认识,本节会提供几个简单的实例供 JavaScript 入门学习之用.下面的代码是一个弹出提示框的例子: 复制代码 代码如下: <script type="text/javascript"> alert("我是提示文字!"); </script> 将上面部分代码,用文本编辑器(如写字板或其他更高级的编辑器,如 EditPlus 等)保存为 alert.html(或 a

  • JavaScript实现简单Tip提示框效果

    本文实例讲述了JavaScript实现简单Tip提示框效果.分享给大家供大家参考,具体如下: // JavaScript Document document.write("<div id='tip' style='position:absolute; width:300px; z-index:1; background-color: #ffffff; border: 1px solid gray; overflow: visible;visibility: hidden;font-size

  • PHP+javascript制作带提示的验证码源码分享

    html代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equi

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

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

  • javascript实现QQ空间相册展示源码

    知识点:html/css布局思维,浮动/定位详解,大企业标准,代码性能优化,js鼠标事件,DOM操作等. 源码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="关键词一,关键词二"> <meta name="De

  • 详解JavaScript之Array.reduce源码解读

    前言 reduce(...)方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值(累计作用) 此方法接受两个参数:callback(...)(必选).initialValue(可选). callback(...)接受4个参数:Accumulator (acc) (累计器).Current Value (cur) (当前值).Current Index (idx) (当前索引).Source Array (src) (源数组). 注意点: 1.callb

  • jQuery源码解读之removeAttr()方法分析

    本文较为详细的分析了jQuery源码解读之removeAttr()方法.分享给大家供大家参考.具体分析如下: 扩展jQuery原型对象的方法: 复制代码 代码如下: jQuery.fn.extend({ //name,传入要DOM元素要移除的属性名.     removeAttr: function( name ) { //使用jQuery.fn对象,即jQuery原型对象的each方法遍历当前选择器选择的jQuery对象数组,并返回该jQuery对象以便链式调用.         return

  • Vue3 源码解读静态提升详解

    目录 什么是静态提升 transform 转换器 hoistStatic 静态提升 walk 函数 walk 函数流程图 总结 什么是静态提升 静态提升是Vue3编译优化中的其中一个优化点.所谓的静态提升,就是指在编译器编译的过程中,将一些静态的节点或属性提升到渲染函数之外.下面,我们通过一个例子来深入理解什么是静态提升. 假设我们有如下模板: <div> <p>static text</p> <p>{{ title }}</p> </di

  • Css-In-Js实现classNames库源码解读

    目录 引言 使用 源码阅读 兼容性 CommonJS AMD window 浏览器环境 实现 多个参数处理 参数类型处理 数组处理 对象处理 测试用例 Css-in-JS 示例 总结 引言 classNames是一个简单的且实用的JavaScript应用程序,可以有条件的将多个类名组合在一起.它是一个非常有用的工具,可以用来动态的添加或者删除类名. 仓库地址:classNames 使用 根据classNames的README,可以发现库的作者对这个库非常认真,文档和测试用例都非常齐全,同时还有有

  • [转]prototype 源码解读 超强推荐第1/3页

    复制代码 代码如下: Prototype is a JavaScript framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codeb

  • Ajax::prototype 源码解读

    AJAX之旅(1):由prototype_1.3.1进入javascript殿堂-类的初探  还是决定冠上ajax的头衔,毕竟很多人会用这个关键词搜索.虽然我认为这只是个炒作的概念,不过不得不承认ajax叫起来要方便多了.所以ajax的意思我就不详细解释了. 写这个教程的起因很简单:经过一段时间的ajax学习,有一些体会,并且越发认识到ajax技术的强大,所以决定记录下来,顺便也是对自己思路的整理.有关这个教程的后续,请关注http://www.x2design.net 前几年,javascri

  • Bootstrap源码解读排版(1)

    源码解读Bootstrap排版 粗体 可以使用<b>和<strong>标签让文本直接加粗. 例如: <p>我在学习<strong>Bootstrap</strong></p> 源码 b, strong { font-weight: bold; } 斜体 使用标签<em>或<i>来实现. 例如: <p>我在学<i>Bootstrap</i>.</p> 强调相关的类

随机推荐