1. <html> 
    2.  
         
  2. <head> 
    3.  
         
  3. <title>title及alt提示特效</title> 
    4.  
         
  4. <style type="text/css"> 
    5.  
         
  5. body{font-size:12px;color:#000000} 
    6.  
         
  6. td{font-size:12px;color:#000000} 
    7.  
         
  7. a:link{font-size:12px;color:#000000} 
    8.  
         
  8. </style> 
    9.  
         
  9. <script language="javascript"> 
    10.  
         
  10. var pltsPop=null; 
    11.  
         
  11. var pltsoffsetX = 12; // 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适 
    12.  
         
  12. var pltsoffsetY = 15; // 弹出窗口位于鼠标下方的距离；3-12 合适 
    13.  
         
  13. var pltsTitle=""; 
    14.  
         
  14. document.write('<div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"></div>'); 
    15.  
         
  15. function pltsinits() 
    16.  
         
  16. { 
    17.  
         
  17.  document.onmouseover = plts; 
    18.  
         
  18.  document.onmousemove = moveToMouseLoc; 
    19.  
         
  19. } 
    20.  
         
  20. function plts() 
    21.  
         
  21. { var o=event.srcElement; 
    22.  
         
  22.  if(o.alt!=null  &&  o.alt!=""){ 
          oo.dypop=o.alt;o.alt=""}; 
    23.  
         
  23.  if(o.title!=null  &&  o.title!=""){ 
          oo.dypop=o.title;o.title=""}; 
    24.  
         
  24.  pltsPop=o.dypop; 
    25.  
         
  25.  if(pltsPop!=null && pltsPop!="" && typeof(pltsPop)!="undefined") 
    26.  
         
  26.  { 
    27.  
         
  27.  pltsTipLayer.style.left=-1000; 
    28.  
         
  28.  pltsTipLayer.style.display=''; 
    29.  
         
  29.  var Msg=pltsPop.replace(/\n/g,"<br>"); 
    30.  
         
  30.  MsgMsg=Msg.replace(/\0x13/g,"<br>"); 
    31.  
         
  31.  var re=/\{(.[^\{]*)\}/ig; 
    32.  
         
  32.  if(!re.test(Msg))pltsTitle="『水木设计联盟』"; 
    33.  
         
  33.  else{ 
    34.  
         
  34.  re=/\{(.[^\{]*)\}(.*)/ig; 
    35.  
         
  35.  pltsTitle=Msg.replace(re,"$1")+" "; 
    36.  
         
  36.  re=/\{(.[^\{]*)\}/ig; 
    37.  
         
  37.  MsgMsg=Msg.replace(re,""); 
    38.  
         
  38.  MsgMsg=Msg.replace("<br>","");} 
    39.  
         
  39.  var content = 
    40.  
         
  40.  '<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">'+ 
    41.  
         
  41.  '<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>'+ 
    42.  
         
  42.  '<tr><td "+attr+" style="padding-left:10px;padding-right:10px;padding-top: 8px;padding-bottom:6px;line-height:140%">'+Msg+'</td></tr>'+ 
    43.  
         
  43.  '<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>'+ 
    44.  
         
  44.  '</table></td></tr></table>'; 
    45.  
         
  45.  pltsTipLayer.innerHTML=content; 
    46.  
         
  46.  toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2); 
    47.  
         
  47.  moveToMouseLoc(); 
    48.  
         
  48.  return true; 
    49.  
         
  49.  } 
    50.  
         
  50.  else 
    51.  
         
  51.  { 
    52.  
         
  52.  pltsTipLayer.innerHTML=''; 
    53.  
         
  53.  pltsTipLayer.style.display='none'; 
    54.  
         
  54.  return true; 
    55.  
         
  55.  } 
    56.  
         
  56. } 
    57.  
         
  57. function moveToMouseLoc() 
    58.  
         
  58. { 
    59.  
         
  59.  if(pltsTipLayer.innerHTML=='')return true; 
    60.  
         
  60.  var MouseX=event.x; 
    61.  
         
  61.  var MouseY=event.y; 
    62.  
         
  62.  var popHeight=pltsTipLayer.clientHeight; 
    63.  
         
  63.  var popWidth=pltsTipLayer.clientWidth; 
    64.  
         
  64.  if(MouseY+pltsoffsetY+popHeight>document.body.clientHeight) 
    65.  
         
  65.  { 
    66.  
         
  66.  popTopAdjust=-popHeight-pltsoffsetY*1.5; 
    67.  
         
  67.  pltsPoptop.style.display="none"; 
    68.  
         
  68.  pltsPopbot.style.display=""; 
    69.  
         
  69.  } 
    70.  
         
  70.  else 
    71.  
         
  71.  { 
    72.  
         
  72.  popTopAdjust=0; 
    73.  
         
  73.  pltsPoptop.style.display=""; 
    74.  
         
  74.  pltsPopbot.style.display="none"; 
    75.  
         
  75.  } 
    76.  
         
  76.  if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth) 
    77.  
         
  77.  { 
    78.  
         
  78.  popLeftAdjust=-popWidth-pltsoffsetX*2; 
    79.  
         
  79.  topleft.style.display="none"; 
    80.  
         
  80.  botleft.style.display="none"; 
    81.  
         
  81.  topright.style.display=""; 
    82.  
         
  82.  botright.style.display=""; 
    83.  
         
  83.  } 
    84.  
         
  84.  else 
    85.  
         
  85.  { 
    86.  
         
  86.  popLeftAdjust=0; 
    87.  
         
  87.  topleft.style.display=""; 
    88.  
         
  88.  botleft.style.display=""; 
    89.  
         
  89.  topright.style.display="none"; 
    90.  
         
  90.  botright.style.display="none"; 
    91.  
         
  91.  } 
    92.  
         
  92.  pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust; 
    93.  
         
  93.  pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust; 
    94.  
         
  94.  return true; 
    95.  
         
  95. } 
    96.  
         
  96. pltsinits(); 
    97.  
         
  97. </script> 
    98.  
         
  98. </head> 
    99.  
         
  99. <body> 
    100.  
         
  100. 链接提示效果：<a href="http://www.lanrentuku.com/" target="_blank" title="title及alt提示特效,本程序由水木设计联盟整理推荐，希望大家喜欢">一个很酷的鼠标悬停特效，但有问题指教，我想知道怎么控制悬停时间</a> 
    101.  
         
  101. </body> 
    102.  
         
  102. </html> 
    103.