title及alt提示特效 

<html> 
<head> 
<title>title及alt提示特效</title> 
<style type="text/css"> 
body{font-size:12px;color:#000000} 
td{font-size:12px;color:#000000} 
a:link{font-size:12px;color:#000000} 
</style> 
<script language="javascript"> 
var pltsPop=null; 
var pltsoffsetX = 12; // 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适 
var pltsoffsetY = 15; // 弹出窗口位于鼠标下方的距离；3-12 合适 
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!=""){oo.dypop=o.alt;o.alt=""}; 
 if(o.title!=null  &&  o.title!=""){oo.dypop=o.title;o.title=""}; 
 pltsPop=o.dypop; 
 if(pltsPop!=null && pltsPop!="" && typeof(pltsPop)!="undefined") 
 { 
 pltsTipLayer.style.left=-1000; 
 pltsTipLayer.style.display=''; 
 var Msg=pltsPop.replace(/\n/g,"<br>"); 
 MsgMsg=Msg.replace(/\0x13/g,"<br>"); 
 var re=/\{(.[^\{]*)\}/ig; 
 if(!re.test(Msg))pltsTitle="『水木设计联盟』"; 
 else{ 
 re=/\{(.[^\{]*)\}(.*)/ig; 
 pltsTitle=Msg.replace(re,"$1")+" "; 
 re=/\{(.[^\{]*)\}/ig; 
 MsgMsg=Msg.replace(re,""); 
 MsgMsg=Msg.replace("<br>","");} 
 var content = 
 '<table style="FILTER:alpha(opacity=90);border: 1px solid #cccccc" id="toolTipTalbe" cellspacing="1" cellpadding="0"><tr><td width="100%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0">'+ 
 '<tr id="pltsPoptop"><td height="20" bgcolor="#0094bb"><font color="#ffffff"><b><p id="topleft" align="left">↖'+pltsTitle+'</p><p id="topright" align="right" style="display:none">'+pltsTitle+'↗</font></b></font></td></tr>'+ 
 '<tr><td "+attr+" style="padding-left:10px;padding-right:10px;padding-top: 8px;padding-bottom:6px;line-height:140%">'+Msg+'</td></tr>'+ 
 '<tr id="pltsPopbot" style="display:none"><td height="20" bgcolor="#0094bb"><font color="#ffffff"><b><p id="botleft" align="left">↙'+pltsTitle+'</p><p id="botright" align="right" style="display:none">'+pltsTitle+'↘</font></b></font></td></tr>'+ 
 '</table></td></tr></table>'; 
 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; 
 } 
} 
function moveToMouseLoc() 
{ 
 if(pltsTipLayer.innerHTML=='')return true; 
 var MouseX=event.x; 
 var MouseY=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(); 
</script> 
</head> 
<body> 
链接提示效果：<a href="http://www.lanrentuku.com/" target="_blank" title="title及alt提示特效,本程序由水木设计联盟整理推荐，希望大家喜欢">一个很酷的鼠标悬停特效，但有问题指教，我想知道怎么控制悬停时间</a> 
</body> 
</html>

　　

 

 

posted @ 2014-08-10 10:05  商商-77  阅读(205)  评论(0)    收藏  举报