javascript弹出带文字信息的提示框效果
本文实例讲述了javascript弹出带文字信息的提示框效果。分享给大家供大家参考，具体如下：
tooltips.js:
//positionofthetooltiprelativetothemouseinpixel//
varoffsetx=12;
varoffsety=8;
functionnewelement(newid)
{
if(document.createElement)
{
varel=document.createElement('div');
el.id=newid;
with(el.style)
{
display='none';
position='absolute';
}
el.innerHTML=' ';
document.body.appendChild(el);
}
}
varie5=(document.getElementByIdx&&document.all);
varns6=(document.getElementByIdx&&!document.all);
varua=navigator.userAgent.toLowerCase();
varisapple=(ua.indexOf('applewebkit')!=-1?1:0);
functiongetmouseposition(e)
{
if(document.getElementByIdx)
{
variebody=(document.compatMode&&
document.compatMode!='BackCompat')?
document.documentElement:document.body;
pagex=(isapple==1?0:(ie5)?iebody.scrollLeft:window.pageXOffset);
pagey=(isapple==1?0:(ie5)?iebody.scrollTop:window.pageYOffset);
mousex=(ie5)?event.x:(ns6)?clientX=e.clientX:false;
mousey=(ie5)?event.y:(ns6)?clientY=e.clientY:false;
varlixlpixel_tooltip=document.getElementByIdx('tooltip');
lixlpixel_tooltip.style.left=(mousex+pagex+offsetx)+'px';
lixlpixel_tooltip.style.top=(mousey+pagey+offsety)+'px';
}
}
functiontooltip(tip)
{
if(!document.getElementByIdx('tooltip'))newelement('tooltip');
varlixlpixel_tooltip=document.getElementByIdx('tooltip');
lixlpixel_tooltip.innerHTML=tip;
lixlpixel_tooltip.style.display='block';
document.onmousemove=getmouseposition;
}
functionexit()
{
document.getElementByIdx('tooltip').style.display='none';
}
test.html
<html>
<head>
<style>
.tableBorder7{width:800;solid;background-color:#000000;}
TD{font-family:宋体;font-size:12px;line-height:15px;}
th{background-color:#f7f7f7;color:#000000;font-size:12px;font-weight:bold;}
th.th1{background-color:#333333;}
td.TableBody7{background-color:#B1EA45;}
</style>
<scriptlanguage="JavaScript"src='tooltips.js'>
</script>
</HEAD>
<BODY>
<divonmouseover="tooltip('如果你添加的是一个播客（Podcast），请选中此复选框。');"onmouseout="exit();">蝶恋花</div>
</BODY>
</HTML>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript提示框效果汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。