zoukankan      html  css  js  c++  java
  • 产生title跟随效果

    Code
    //产生title跟随效果
    document.write('<div id="pltsTipLayer" name="pltsTipLayer" style="display: none;position: absolute; z-index:10001; text-align:left;"></div>');
    var pltsPop=null;
    var pltsoffsetX = 10;   // 弹出窗口位于鼠标左侧或者右侧的距离;3-12 合适
    var pltsoffsetY = 15;  // 弹出窗口位于鼠标下方的距离;3-12 合适
    var pltsPopbg="#FFFFEE"//背景色
    var pltsPopfg="#111111"//前景色
    var pltsTitle="";
    function pltsinits()
    {
        document.onmouseover   
    = plts;
        document.onmousemove 
    = moveToMouseLoc;
    }


    function plts()
    {  
    var o=event.srcElement;
        
    if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
        
    if(o.title!=null && o.title!=""){o.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>");
           Msg
    =Msg.replace(/\0x13/g,"<br>");
           
    var re=/\{(.[^\{]*)\}/ig;
           
    if(!re.test(Msg))pltsTitle="";
           
    else{
             re
    =/\{(.[^\{]*)\}(.*)/ig;
               pltsTitle
    =Msg.replace(re,"$1")+" ";
             re
    =/\{(.[^\{]*)\}/ig;
             Msg
    =Msg.replace(re,"");
             Msg
    =Msg.replace("<br>","");}
                  
    var content =
                 
    '<table style="FILTER:alpha(opacity=90) shadow(color=#bbbbbb,direction=135);" id=toolTipTalbe border=0><tr><td width="100%"><table class=TittableBorder cellspacing="1" cellpadding="0" style="100%">'+
                 
    '<tr><td class=Tit style="padding-left:10px;padding-right:10px;padding-top: 6px;padding-bottom:6px;line-height:135%">'+Msg+'</td></tr>'+
                 
    '</table></td></tr></table>';
                  pltsTipLayer.innerHTML
    =content;
                  toolTipTalbe.style.width
    =Math.min(pltsTipLayer.clientWidth,document.documentElement.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;
           
    //window.status=event.y;
           var popHeight=pltsTipLayer.clientHeight;
           
    var popWidth=pltsTipLayer.clientWidth;
           
    if(MouseY+pltsoffsetY+popHeight>document.documentElement.clientHeight)
           {
                    popTopAdjust
    =-popHeight-pltsoffsetY*1.5;
           }
            
    else
           {
                     popTopAdjust
    =0;
           }
           
    if(MouseX+pltsoffsetX+popWidth>document.documentElement.clientWidth)
           {
                  popLeftAdjust
    =-popWidth-pltsoffsetX*2;
           }
           
    else
           {
                  popLeftAdjust
    =0;
           }
           pltsTipLayer.style.left
    =MouseX+pltsoffsetX+document.documentElement.scrollLeft+popLeftAdjust;
           pltsTipLayer.style.top
    =MouseY+pltsoffsetY+document.documentElement.scrollTop+popTopAdjust;
             
    return true;
    }
    pltsinits();

    使用方法:对象一定要有alt属性,title的值显示为alt值。

  • 相关阅读:
    Windows下Subversion配置管理员指南
    asp.net HttpHand和HttpModule的详细解释,包括Asp.Net对Http请求的处理流程。
    SQL Server 2000不能远程连接的问题
    ASP通用分页类[强]
    不错的站长工具网址(不断收集中....)
    函数的四种调用模式
    HDOJ 3943 Kth Nya Number(数位DP)
    HDOJ 2196 Computer
    HDOJ 3695 Computer Virus on Planet Pandora (AC自动机)
    HDOJ 4277 USACO ORZ (搜索+剪枝)
  • 原文地址:https://www.cnblogs.com/shineqiujuan/p/1349257.html
Copyright © 2011-2022 走看看