JavaScript Title、alt提示实现源码解读_javascript技巧_脚本之家

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

复制代码 代码如下:

含注释代码: 复制代码 代码如下:
/***********************************************
一个JavaScript Title、alt提示源码解读 代码注释:唐国辉
作者博客:
***********************************************/
//定义getElementById快捷方式 function $==’object’) { return obj; } else
{ return document.getElementById; } }
//定义document.write快捷方式,代替复杂的DOM操作 function $P {
document.write; } //脚本错误屏蔽 window.onerror=function () { return
true; }; /* 定义变量:
pltsPop(提示内容文字,来自对象的alt或title属性,不包含HTML)
toolTip(提示内容DOM对象,即后面定义的content变量) pltsPoptop
pltsPopbot topLeft botLeft topRight botRight */ var
pltsPop,toolTip,pltsPoptop,pltsPopbot,topLeft,botLeft,topRight,botRight;
//设置提示窗口相对提示对象的位置偏移量 var pltsoffsetX=10; var
pltsoffsetY=15; var pltsTitle=””; //创建一个绝对定位的隐藏图层 $P(‘

var pltsPop=null;
var pltsoffsetX = 5;   // 弹出窗口位于鼠标左侧或者右侧的距离;3-12 合适
var pltsoffsetY = 5;  // 弹出窗口位于鼠标下方的距离;3-12 合适
var pltsPopbg=”#FFffff”; //背景色
var pltsPopfg=”#880000″; //前景色
var pltsTitle=””;
document.write(‘<div id=pltsTipLayer style=”display: none;position: absolute; z-index:10001″></div>’);
function pltsinits()
{
    document.onmouseover   = plts;
    document.onmousemove = moveToMouseLoc;
}
function plts()
{  var o=event.srcElement;
    if(o.alt!=null && o.alt!=””){o.dypop=o.alt;o.alt=””};
    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=-20;
pltsTipLayer.style.display=”;
var Msg=pltsPop.replace(/\n/g,”<br>”);
Msg=Msg.replace(/\0x13/g,”<br>”);
var re=/\{(.[^\{]*)\}/ig;
if(!re.test(Msg))pltsTitle=””;
else{
   re=/\{(.[^\{]*)\}(.*)/ig;
     pltsTitle=Msg.replace(re,”$1″)+” “;
   re=/\{(.[^\{]*)\}/ig;
   Msg=Msg.replace(re,””);
   Msg=Msg.replace(“<br>”,””);}
   var attr=(document.location.toString().toLowerCase().indexOf(“”)>0?”nowrap”:””);
        var content =
       ‘<table style=”FILTER:alpha(opacity=90) shadow(color=#6f6f6f,direction=135);” id=toolTipTalbe ><tr><td width=”100%”><table class=tdr cellspacing=”0″ cellpadding=”0″ border=0 style=”width:100%”>’+
       ‘<tr id=pltsPoptop ><th height=25 valign=bottom  class=tdr><p id=topleft align=left>’+pltsTitle+'</p><p id=topright align=right style=”display:none”>’+pltsTitle+'</th></tr>’+
       ‘<tr><td “+attr+” class=bg_tdr style=”padding-left:14px;padding-right:14px;padding-top: 6px;padding-bottom:6px;line-height:135%”>’+Msg+'</td></tr>’+
       ‘<tr id=pltsPopbot style=”display:none”><th height=25 valign=bottom class=tdr><p id=botleft align=left>’+pltsTitle+'</p><p id=botright align=right style=”display:none”>’+pltsTitle+'</th></tr>’+
       ‘</table></td></tr></table>’;
www.hj8828.com,        pltsTipLayer.innerHTML=content;
        toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2);
        moveToMouseLoc();
        return true;
       }
    else
    {
     pltsTipLayer.innerHTML=”;
       pltsTipLayer.style.display=’none’;
        return true;
    }
}

‘); //把刚创建的层对象赋值给一个变量,此语句一定要出现在层创建之后 var
pltsTipLayer=$;
//定义鼠标移到对象上时处理函数,主要提取alt或title属性值,并初始化提示框HTML及样式
function PltsMouseOver { //兼容不同浏览器的事件和对象获取 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!=”undefined”) {
//把上面创建的提示层显示出来,暂时移到左边很远,虽然显示但用户看不到
pltsTipLayer.style.left=-1000; pltsTipLayer.style.display=”; /*
格式化提示信息,把其中的\n换成
,比如像下面这样定义title值,显示出来会是作者和性别各一行,因为Tom和Sex之间有\n:

function moveToMouseLoc()
{
if(pltsTipLayer.innerHTML==”)return true;
var MouseX=event.x;
var MouseY=event.y;
//window.status=event.y;
var popHeight=pltsTipLayer.clientHeight;
var popWidth=pltsTipLayer.clientWidth;
if(MouseY+pltsoffsetY+popHeight>document.body.clientHeight)
{
    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.body.clientWidth)
{
  popLeftAdjust=-popWidth-pltsoffsetX*2;
  topleft.style.display=”none”;
  botleft.style.display=”none”;
  topright.style.display=””;
  botright.style.display=””;
}
else
{
  popLeftAdjust=0;
  topleft.style.display=””;
  botleft.style.display=””;
  topright.style.display=”none”;
  botright.style.display=”none”;
}
pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust;
pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust;
   return true;
}
pltsinits();

Article title…

代码如下: varpltsPop=null;
varpltsoffsetX=5;//弹出窗口位于鼠标左侧或者右侧的距离;3-12合适
varpltsoffsetY=5;//弹出窗口位于鼠标下方的距…

*/ var Msg=pltsPop.replace; Msg=Msg.replace;
//定义正则表达式检查提示内容是否含有类似这样的内容“{提示标题}”,而且{}和{{}是排除在处的,如果没有就默认用“简介”作为提示标题
var re=/\{\}/ig; if { pltsTitle=”简介”; } else { re=/\{/ig;
//提取{}中的内容 pltsTitle=Msg.replace+” “;
//把{内容},包括{}在内的内容替换为空,得到最终提示正文的内容
re=/\{\}/ig; Msg=Msg.replace; }
//定义提示框内容Html与Style,并把获得的相关内容放到对应变量中 var
content=”

↖”+pltsTitle+”