经常在网页上看到这样的效果:
将鼠标放到某个链接或某个区域,就会在鼠标附近弹出一个提示框,里边显示相关提示信息。
在网上找了大量相关类似代码,但是普遍存在浏览器不兼容的问题。没办法,只好修改。
 
 
先看看效果图:
这个控件的特点:
1、兼容IE和FireFox
2、使用的时候只需从工具箱拖动到页面中一次,页面中具有title属性的可见标签都会有这个效果
主要源代码javascript,如果你不使用本控件,也可以把这个javascript添加到页面中达到同样的目的:
  1. var pltsPop=null;
  2.  var pltsoffsetX = 10;   // 弹出窗口位于鼠标左侧或者右侧的距离;3-12 合适
  3.  var pltsoffsetY = 15// 弹出窗口位于鼠标下方的距离;3-12 合适
  4.  var pltsPopbg="#FFFFEE"; //背景色
  5.  var pltsPopfg="#111111"; //前景色
  6.  var pltsTitle="";
  7. document.write('<div id="pltsTipLayer" style="display: none;position: absolute; z-index:10001"></div>');
  8. function pltsinits()
  9.  {
  10.      document.onmouseover = plts;
  11.      document.onmousemove = moveToMouseLoc;
  12.  }
  13. function plts(evt)
  14.  { 
  15.      if(evt==null){
  16.         evt=window.event;
  17.        }
  18.       var pltsTipLayer=document.getElementById("pltsTipLayer");
  19.       var o = evt.srcElement?evt.srcElement:evt.target;
  20.       var getClientWidth=(document.documentElement.clientWidth == 0) ? document.body.clientWidth : document.documentElement.clientWidth;
  21.        
  22.      if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
  23.      if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
  24.      pltsPop=o.dypop;
  25.      if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined")
  26.      {
  27.         pltsTipLayer.style.left=-1000+"px";
  28.         pltsTipLayer.style.display='';
  29.         var Msg=pltsPop.replace(/\n/g,"<br/>");
  30.         Msg=Msg.replace(/\0x13/g,"<br/>");
  31.         var re=/\{(.[^\{]*)\}/ig;
  32.         if(!re.test(Msg))pltsTitle="简介";
  33.         else{
  34.           re=/\{(.[^\{]*)\}(.*)/ig;
  35.             pltsTitle=Msg.replace(re,"$1")+" ";
  36.           re=/\{(.[^\{]*)\}/ig;
  37.           Msg=Msg.replace(re,"");
  38.           Msg=Msg.replace("<br/>","");}
  39.                var content =
  40.               '<table id="toolTipTalbe"><tr><td>' +
  41.               '<div id="pltsPoptop" class="tipstitle">' +
  42.               '<div id="topleft"><div style="text-align:left;">↖'+pltsTitle+'</div></div><div id="topright" style="display:none;"><div style="text-align:right;">'+pltsTitle+'↗</div></div>'+
  43.               '</div>'+
  44.               '<div class="tipsbody">'+Msg+'</div>'+
  45.               '<div id="pltsPopbot" class="tipstitle" style="display:none;">'+
  46.               '<div id="botleft"><div style="text-align:left;">↙'+pltsTitle+'</div></div><div id="botright" style="display:none;"><div style="text-align:right;">'+pltsTitle+'↘</div></div>'+
  47.               '</div></td></tr></table>';
  48.                document.getElementById("pltsTipLayer").innerHTML=content;
  49.                document.getElementById("toolTipTalbe").style.width=Math.min(pltsTipLayer.clientWidth,getClientWidth/2.2)+"px";
  50.                moveToMouseLoc(evt);
  51.                return true;
  52.         }
  53.      else
  54.      {
  55.             pltsTipLayer.innerHTML='';
  56.             pltsTipLayer.style.display='none';
  57.             return true;
  58.      }
  59. }
  60. function moveToMouseLoc(evt)
  61. {
  62.      if(evt==null){
  63.         evt=window.event;
  64.        }
  65.          var pltsTipLayer=document.getElementById("pltsTipLayer");
  66.         if(pltsTipLayer.innerHTML=='')return true;
  67.         var MouseX = evt.x ? evt.x : evt.pageX;
  68.         var MouseY = evt.y ? evt.y : evt.pageY;
  69.         //window.status=event.y;
  70.         var popHeight=pltsTipLayer.clientHeight;
  71.         var popWidth=pltsTipLayer.clientWidth;
  72.         var popTopAdjust=0;
  73.         var popLeftAdjust=0;
  74.        
  75.         var getClientHeight=(document.documentElement.clientHeight == 0) ? document.body.clientHeight : document.documentElement.clientHeight;
  76.         var getClientWidth=(document.documentElement.clientWidth == 0) ? document.body.clientWidth : document.documentElement.clientWidth;
  77.        
  78.         if(MouseY+pltsoffsetY+popHeight>getClientHeight)
  79.         {
  80.                  popTopAdjust=-popHeight-pltsoffsetY*1.5;
  81.                  document.getElementById("pltsPoptop").style.display="none";
  82.                  document.getElementById("pltsPopbot").style.display="";
  83.         }
  84.          else
  85.         {
  86.                  document.getElementById("pltsPoptop").style.display="";
  87.                  document.getElementById("pltsPopbot").style.display="none";
  88.         }
  89.         if(MouseX+pltsoffsetX+popWidth>getClientWidth)
  90.         {
  91.                popLeftAdjust=-popWidth-pltsoffsetX*2;
  92.                document.getElementById("topleft").style.display="none";
  93.                document.getElementById("botleft").style.display="none";
  94.                document.getElementById("topright").style.display="";
  95.                document.getElementById("botright").style.display="";
  96.         }
  97.         else
  98.         {
  99.                document.getElementById("topleft").style.display="";
  100.                document.getElementById("botleft").style.display="";
  101.                document.getElementById("topright").style.display="none";
  102.                document.getElementById("botright").style.display="none";
  103.         }
  104.         var ptleft=0;
  105.         var pttop=0;
  106.         if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
  107.           ptleft = MouseX + pltsoffsetX + popLeftAdjust;
  108.           pttop = MouseY + pltsoffsetY + popTopAdjust;
  109.         } else{
  110.           ptleft = MouseX + pltsoffsetX + document.body.scrollLeft + document.documentElement.scrollLeft + popLeftAdjust;
  111.           pttop = MouseY + pltsoffsetY + document.body.scrollTop + document.documentElement.scrollTop + popTopAdjust;
  112.         }
  113.         pltsTipLayer.style.left = ptleft + "px";
  114.         pltsTipLayer.style.top = pttop + "px";
  115.        return true;
  116. }
  117. pltsinits();
还有一个样式表文件:
  1. #toolTipTalbe{
  2. font-family:宋体;
  3. font-size:12px;
  4. line-height:15px;
  5. FILTER:alpha(opacity=90) shadow(color=#bbbbbb,direction=135);
  6. -moz-opacity:0.9;
  7. opacity:0.9;
  8. border-width:0px;
  9. width:260px;
  10. }
  11. .tipsbody{
  12. background-color: #B1EA45;
  13. padding-left:14px;
  14. padding-right:14px;
  15. padding-top:6px;
  16. padding-bottom:6px;
  17. line-height:135%;
  18. }
  19. .tipstitle{
  20. background-color: #333333;
  21. font-weight:bold;
  22. color:#ffffff;
  23. width:100%;
  24. height:19px;
  25. line-height:19px;
  26. border-width:0px;
  27. }
欢迎就这个控件的问题与我讨论