鼠标放到文字上显示Title的特效

发布时间：2008年12月18日      浏览次数：1529 次
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
var htip_Clock=0;
var tipoffsetX = 10; // 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适
var tipoffsetY = 10; // 弹出窗口位于鼠标下方的距离；3-12 合适
var tipPopbg="#FFFFEE"; //背景色
var tipPopfg="#111111"; //前景色
document.write('<body><div id="tipTipLayer" style="display: none;position: absolute; z-index:10001"></div>');
var ax_ts=document.getElementById("tipTipLayer");
function tip_inits(){document.onmouseover = tip_display;document.onmousemove = tip_display_pre;}
function tipSet(o)
{
var m;
if(o.title!=null && o.title!=""){m=o.title;o.title=""};
if(o.alt!=null && o.alt!=""){m=o.alt;o.alt=""};

o.tipMsg = "_";
if(m!=null&&m!=""&&typeof(m)!="undefined")
{
o.tipBoderColor="#608ce6";
o.tipTitle="温馨提示";
o.tipIcon = "";//" <img src='' border=0 onerror=\"this.style.display='none';\">";
o.onmouseout = tip_Close;

m=m.replace(/\n/g,"<br>");
m=m.replace(/\0x13/g,"<br>");
var re=/(.*)\{(.[^\{]*)\}(.*)/ig;
var s = m.replace(re,"$2") ;
if( !(s.length==m.length) )
{
var s2 = s.split('#');o.tipTitle = s2[0];
if(s2.length>=2) o.tipIcon= s2[1] ;
if(s2.length>=3) o.tipBoderColor='#'+s2[2]+" ";
m=m.replace(re,"$1$3");

}
o.tipMsg =m;
}
}
function tip_Close(){
ax_ts.innerHTML='';
ax_ts.style.display='none';
}
function tip_display_pre(e ){
if(e ){ o= e.target; MouseX=e.pageX;MouseY=e.pageY} else{o=event.srcElement;MouseX=event.x;MouseY=event.y}
if( o.tipMsg==null)tipSet(o)
}
function tip_display(e ){
//if(htip_Clock!=0){clearTimeout(htip_Clock);htip_Clock=0;}
if(e ){
            o= e.target; MouseX=e.pageX;MouseY=e.pageY} else{o=event.srcElement;MouseX=event.x;MouseY=event.y
      }
if( o.tipMsg==null)tipSet(o)
if( o.tipMsg=="_" ){
tip_Close();
}else{
       ax_ts.style.left=-1000;
       ax_ts.style.display='';
       var content = '<table border="0" cellspacing="0" cellpadding="0" id="toolTipTalbe" style="font-size:12px; margin:0; padding:0px;" ><tr><td colspan="2"><span id="tipPoptop"><span id="topleft" style="float:left;margin:0; padding:0px; margin-bottom:-1px;"><font color='+o.tipBoderColor+'>◣</font></span><span id="topright" style="display:none;float:right;margin:0; padding:0px; margin-bottom:-1px;;"><font color='+o.tipBoderColor+'>◢</font></span></span></td></tr>'+'<tr><td colspan="2" style="border:'+o.tipBoderColor+' solid 1px;background:'+o.tipBoderColor+';color:#FFFFFF; margin:0;padding:0px;" >  '+o.tipTitle+'</td></tr><tr style="background:#FFFFFF;"><td valign="top" style="border-left:'+o.tipBoderColor+' solid 1px;border-bottom:'+o.tipBoderColor+' solid 1px;padding: 0px"> '+o.tipIcon+'</td><td style="border-right:'+o.tipBoderColor+' solid 1px;border-bottom:'+o.tipBoderColor+' solid 1px;" > <div style="padding:5px; color:#666666;"> '+o.tipMsg+'</div> </td></tr>'+ '<tr><td colspan="2"><span id=tipPopbot ><span id="botleft" align="left"style="float:left;display:none; margin-top:1px; padding:0px;"><font color='+o.tipBoderColor+'>◤</font></span><span id="botright" align="right" style="display:none;float:right;margin-top:1px; padding:0px;"><font color='+o.tipBoderColor+'>◥</font></span></span></td></tr></table>';
       ax_ts.innerHTML=content;
       document.getElementById("toolTipTalbe").style.width=Math.min(ax_ts.clientWidth,document.body.clientWidth/2.2);
       moveToMouseLoc(e);
       //htip_Clock = setTimeout("tip_Close()",2000);
       return true;
}
}
function moveToMouseLoc(e){
      if(e){MouseX=e.pageX;MouseY=e.pageY;}else{MouseX=event.x;MouseY=event.y;}
      if(ax_ts.innerHTML=='')return true;
var popHeight=ax_ts.clientHeight;
var popWidth=ax_ts.clientWidth;
if(MouseY+tipoffsetY+popHeight>document.body.clientHeight){
popTopAdjust=-popHeight-tipoffsetY*1.5;
document.getElementById("tipPoptop").style.display="none";
document.getElementById("tipPopbot").style.display="";
}else{
popTopAdjust=0;
document.getElementById("tipPoptop").style.display="";
document.getElementById("tipPopbot").style.display="none";
}
if(MouseX+tipoffsetX+popWidth>document.body.clientWidth){
popLeftAdjust=-popWidth-tipoffsetX*2;
document.getElementById("topleft").style.display="none";
document.getElementById("botleft").style.display="none";
document.getElementById("topright").style.display="";
document.getElementById("botright").style.display="";
}else{
popLeftAdjust=0;
document.getElementById("topleft").style.display="";
document.getElementById("botleft").style.display="";
document.getElementById("topright").style.display="none";
document.getElementById("botright").style.display="none";
}
ax_ts.style.left=MouseX+tipoffsetX+document.body.scrollLeft+popLeftAdjust;
if (navigator.userAgent.indexOf("MSIE")<=0){
                  ax_ts.style.top=MouseY+tipoffsetY+popTopAdjust;
            }else{
                  ax_ts.style.top=MouseY+tipoffsetY+document.body.scrollTop+popTopAdjust;
            }
return true;
}
tip_inits();
</script>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><a title="这里是提示文字!">鼠标放到这上面来</a></td>
<td valign="top"><div align="right"><a title="这里是提示文字!">鼠标放到这上面来</a></div></td>
</tr>
<tr>
<td valign="bottom"><a title="这里是提示文字!">鼠标放到这上面来</a></td>
<td valign="bottom"><div align="right"><a title="这里是提示文字!">鼠标放到这上面来</a></div></td>
</tr>
</table>
免责声明：本站相关技术文章信息部分来自网络，目的主要是传播更多信息，如果您认为本站的某些信息侵犯了您的版权，请与我们联系，我们会即时妥善的处理，谢谢合作！
相 关 类 别
PHP编程
ASP编程
ASP.NET编程
JSP编程
Javascript特效
VBscript特效
Ajax技术
Div+CSS网站重构
搜索引擎优化SEO
HTML技术
其它综合
Soap技术
桂林生活网
热 点 文 章
·中国黄历-老黄历-黄历查询-每日宜忌 代码
·按ctrl+enter提交表单
·一个“万年历”网页源代码
·俄罗期方块
·五子棋(js)
·一个表单日期输入的JS脚本 非常实用
·我的经典下拉菜单,增加了使div层能显示在select表单控件之上的功能
·非常好的javascript的md5加密函数
·我整理修改的一个精典右键菜单JS代码
·一段在表单里用的js日历
·JS的正则表达式
·经典导航标题下拉菜单示例(很爽的,呵呵)
·模似windows XP 左侧的菜单效果
·javascript特效实现翻页显示页面内容