现在的位置: 首页 > 综合 > 正文

title及alt提示特效

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

 

 

抱歉!评论已关闭.