`
umgsai
  • 浏览: 103229 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

title及alt提示特效

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

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics