实现自定义的ToolTip

　　参考淘宝商品列表的ToolTip，自己做了一个类似的，如下图：

 

　　　　图一：是页面原始页面

　　　　图二：鼠标放到“1”上面时，右边弹出的ToolTip加载中的效果

　　　　图三：是ToolTip加载完成后的效果

　　　　

　　　　上图中"1"，“2”,"3"分别是3个DIV，其中“3”是隐藏起来的，当鼠标移到“1”，“2”上面会将“3”显示出来，并通过Ajax加载“3”中的内容，当鼠标移出时会将“3”隐藏起来。

　　

　　　　具体代码如下：

　　

　　　　

 

代码

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " TestMyAjax.aspx.cs "  Inherits = " TestMyAjax "   %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
     < title > 无标题页 </ title >
     < script  language ="javascript"  type ="text/javascript" >
      // Ajax 对象
      var  xmlHttp;
      var  t; 
        // 创建Ajax对象
         function  CreateXmlHttp ()
        {
             if (window.ActiveXObject)
            {
                xmlHttp =   new  ActiveXObject( " Microsoft.XMLHTTP " );
            }
             else   if  (window.XMLHttpRequest)
            {
                xmlHttp  =   new  XMLHttpRequest();
            }
        }
       // 计算 控件的offset位置
        function  CalLocation(field,attr)
       {
         var  loct = 0 ;
         while (field)
        {
            loct += field[attr];
            field = field.offsetParent;
        }
        
         return  loct;
       }
       
         // 改变当前Div的背景颜色和Border
          function  showBorder(div)
         {
            div.style.backgroundColor = " PapayaWhip " ;
            div.style.borderStyle = " solid " ;
            div.style.borderWidth = " 1px " ;
            div.style.borderColor = " #ff6600 " ;
          
            ShowMe(div);
         }
         
          // 隐藏ToolTip
          function  delBorder(div)
         {
            div.style.backgroundColor = " white " ;
            div.style.borderStyle = " solid " ;
            div.style.borderWidth = " 1px " ;
            div.style.borderColor = " #e8e8e8 " ;
            
            HideMe();
         }

          // 加载ToolTip
          function  ShowMe(div)
         { 
            ClearTime();
              var  left  =  CalLocation(div, " offsetLeft " ) + div.offsetWidth;
              var  top  = CalLocation(div, " offsetTop " )  +  div.offsetHeight / 2;
             
              var  show  = document.getElementById ( " divShow " );
             if  (show.style.visibility  != " visible "   ||  parseInt( show.style.top) !=  top)
            {
                show.innerHTML = "" ;
                 var  img  = document.createElement ( " img " );
                img.setAttribute( " src " , " Images/loading.gif " );
                show.appendChild(img);
                show.appendChild(document.createTextNode ( " 加载中，请稍后  " ));
               
                show.style.left = left + " px " ;
                show.style.top = top + " px " ;
                show.style.visibility = " visible " ;
                GetContent(div.innerText);
            } 
           
         } 
         
          // 隐藏ToolTip
          function  HideToolTip()
         { 
              var  div  = document.getElementById ( " divShow " );
             div.style.visibility = " hidden " ;
         }
         
          // 通过SetTimeout 隐藏ToolTip
           function  HideMe()
          {
             t =  setTimeout( " HideToolTip() " , 200 ); 
             document.getElementById ( " showDiv " ).innerHTML += " </br> " + t + " add "
          }
           
            // 清除 SetTimeout对象
            function  ClearTime()
           {
              
              if ( typeof (t) != " undefined " )
             {
                clearTimeout(t);
                
                document.getElementById ( " showDiv " ).innerHTML += " </br> " + t + " clear "
             }
           }
           
            // 开始异步操作
            function  GetContent(id) 
           {
                CreateXmlHttp();
                
                xmlHttp.onreadystatechange = showToolTipResult;
                xmlHttp.open( " Get " , " myAjax.ashx?ts= " + new  Date().getTime() + " &ID= " + escape(id), true );
                xmlHttp.send( null );
            
           }
           
            // 得到Ajax异步数据，显示到ToolTip中
            function  showToolTipResult()
           {
                 if  (xmlHttp.readyState == 4 )
                {
                       if  (xmlHttp.status == 200 )
                      {
                            var  msg = xmlHttp.responseXML; 
                             var  div  = document.getElementById ( " divShow " );
            
                             if  (div.style.visibility == " visible " )
                            { 
                                var  output = "" ; 
                                for  ( var  i = 0 ;i < msg.getElementsByTagName( " data " ).length ;i ++ )
                               {
                              
                                    output +=  msg.getElementsByTagName( " data " )[i].firstChild.nodeValue + " </br> " ;
                               }
                          
                                div.innerHTML =  output + " <span  style ='color :Red ; font-size :30px; font-weight :bold ;'>3</span> " ;
                            }
                      }
                }
           }
           
     </ script >

     < style  type ="text/css" >
       .mainDiv
        {  
        }
        .div
         {
            width  : 200px ;
            height  : 200px ;  
            border  : 1px solid #e8e8e8 ;   
          
         }
        
        .divShow
         {
            width :  100px ;  height :  100px ;  
            position :  absolute ;   
            visibility  : hidden ;
            border :  1px solid red ;
            background-color  : GrayText ;
         }
     </ style >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
         < div  id ="mainDiv" >
             < div  onmouseover ="showBorder(this)"  onmouseout ="delBorder(this)"  class ="div" >
               < span   style  ="color :Red ; font-size :30px; font-weight :bold ;" > 1 </ span >
             </ div >
             < div  onmouseover ="showBorder(this)"  onmouseout ="delBorder(this)"  class ="div" >
                < span   style  ="color :Red ; font-size :30px;font-weight :bold ;" > 2 </ span >
             </ div >
         </ div >
         < div  class ="divShow"  id ="divShow"  onmouseover ="ClearTime()"  onmouseout ="HideMe()" >
         </ div >
         < div  id ="showDiv"  class ="div"  style  =" display :none" >
         </ div >
     </ form >
</ body >
</ html >

　　

　　　　异步操作的myAjax.ashx 代码

 

代码

<% @ WebHandler Language = " C# "  Class = " myAjax "   %>

using  System;
using  System.Web;

public   class  myAjax : IHttpHandler, System.Web.SessionState.IRequiresSessionState
{
    
     public   void  ProcessRequest (HttpContext context) {


        
        System.Threading.Thread.Sleep( 1000 );
        context.Response.ContentType  =   " text/xml;charset=utf-8 " ; 
        context.Response.Write( " <Test> " ); 
        context.Response.Write( " <data> "   +  context.Request .QueryString [ " ID " ].ToString ()  +   " 的ToolTip</data></Test> " );
        
        
    }
 
     public   bool  IsReusable {
         get  {
             return   true  ;
        }
    }

}

 

 

　 代码很简单，用setTimeout来隐藏ToolTip的原因是，当鼠标从“1”移出到“3”时，显然我不想要ToolTip关闭，因此在这个移动过程中设置一个时间差来关闭它。用setTimeout刚好能解决这个问题。

 

转载于:https://www.cnblogs.com/aierduo/archive/2009/11/27/1612070.html