100分，看看哪位能作一下 带角度的提示层 ，立即奉上


就是这样的，以前在一个新闻网站上看过，过了太久了，没有找到，希望别位能实现一下，或给个网站的地址，实现后分立即奉上

解决方案 »

  1.   

    vs2005下，控件的属性中不是有个ToolTip属性么
    这个属性就是鼠标指向控件是显示的提示信息。
      

  2.   

    指向你的头像的时候不是会出来一个嘛，向CSDN问好了。
      

  3.   

    呵呵，鼠标放到上面去，出现一个透明的CSS层，然后把ALT或者TOOLTIP中的内容显示在DIV里，其实这个是一个大的DIV。
    马上给你段代码
      

  4.   

    <script language="JavaScript"> 
        //鼠标旁边的提示信息,类似与163登录后的页面提示效果
        //***********默认设置定义.********************* 
        tPopWait=50;//停留tWait豪秒后显示提示。 
        tPopShow=5000;//显示tShow豪秒后关闭提示 
        showPopStep=20; 
        popOpacity=99; 
        //***************内部变量定义***************** 
        sPop=null; 
        curShow=null; 
        tFadeOut=null; 
        tFadeIn=null; 
        tFadeWaiting=null; 
        document.write("<style type='text/css'id='defaultPopStyle'>"); 
        document.write(".cPopText { background-color: #F8F8F5;color:#000000; border: 1px #000000 solid;font-color: font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}"); 
        document.write("</style>"); 
        document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");     function showPopupText(){ 
        var o=event.srcElement; 
        MouseX=event.x; 
        MouseY=event.y; 
        if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt="";}
        if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""; }
        if(o.dypop!=sPop) { 
        sPop=o.dypop; 
        clearTimeout(curShow); 
        clearTimeout(tFadeOut); 
        clearTimeout(tFadeIn); 
        clearTimeout(tFadeWaiting); 
        if(sPop==null || sPop=="") { 
        dypopLayer.innerHTML=""; 
        dypopLayer.style.filter="Alpha()"; 
        dypopLayer.filters.Alpha.opacity=0; 
        } 
        else { 
        if(o.dyclass!=null) popStyle=o.dyclass 
        else popStyle="cPopText"; 
        curShow=setTimeout("showIt()",tPopWait); 
        } 
        } 
        } 
        function showIt(){ 
        dypopLayer.className=popStyle; 
        dypopLayer.innerHTML=sPop; 
        popWidth=dypopLayer.clientWidth; 
        popHeight=dypopLayer.clientHeight; 
        if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24 
        else popLeftAdjust=0; 
        if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24 
        else popTopAdjust=0; 
        dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust; 
        dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust; 
        dypopLayer.style.filter="Alpha(Opacity=0)"; 
        fadeOut(); 
        } 
        function fadeOut(){ 
        if(dypopLayer.filters.Alpha.opacity<popOpacity) { 
        dypopLayer.filters.Alpha.opacity+=showPopStep; 
        tFadeOut=setTimeout("fadeOut()",1); 
        } 
        else { 
        dypopLayer.filters.Alpha.opacity=popOpacity; 
        tFadeWaiting=setTimeout("fadeIn()",tPopShow); 
        } 
        } 
        function fadeIn(){ 
        if(dypopLayer.filters.Alpha.opacity>0) { 
        dypopLayer.filters.Alpha.opacity-=1; 
        tFadeIn=setTimeout("fadeIn()",1); 
        } 
        } 
        document.onmouseover=showPopupText; 
        </script><a href="#" title="这是提示">tip</a> <a href="#" title="这是提示">这是提示</a>
      

  5.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html> 
    <head> 
    <style   type="text/css"> 
    body,   p,   td,   th   {font-size:12px;   color:#000000   } 
    .bg_td   {   background-color:#f7f7f7;   } 
    .td   {   background-image:   url('http://www.thuayuan.com/skin/skin_1/bg_td.gif');   color:   #996699;   height:   23px;   font-weight:bold   } </style> <script   language=javascript> //***********默认设置定义.********************* 
    var   tPopWait=50;   //停留tWait豪秒后显示提示。 
    var   tPopShow=6000;   //显示tShow豪秒后关闭提示 
    var   showPopStep=20; 
    var   popOpacity=95; 
    var   tfontcolor="#000000"; 
    var   tbgcolor="#000000"; 
    var   tbordercolor="#666666"; //***************内部变量定义***************** 
    var   pltsPop=null; 
    var   pltsoffsetX   =   10;   //   弹出窗口位于鼠标左侧或者右侧的距离；3-12   合适 
    var   pltsoffsetY   =   15;   //   弹出窗口位于鼠标下方的距离；3-12   合适 
    var   pltsPopbg="#FF0099";   //背景色 
    var   pltsPopfg="#880000";   //前景色 
    var   pltsTitle=""; 
    document.write(' <div   id=pltsTipLayer   style="display:   none;position:   absolute;   z-index:10001"> </div> '); 
    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="『GuYeR』   提示信息"; 
    else{ 
    re=/\{(.[^\{]*)\}(.*)/ig; 
    pltsTitle=Msg.replace(re,"$1")+"   "; 
    re=/\{(.[^\{]*)\}/ig; 
    Msg=Msg.replace(re,""); 
    Msg=Msg.replace(" <br> ","");} 
    var   attr=(document.location.toString().toLowerCase().indexOf("list.asp")> 0?"nowrap":""); 
    var   content   = 
    ' <table   style="FILTER:alpha(opacity=90)   shadow(color=#bbbbbb,direction=135);"   id=toolTipTalbe   border=0> <tr> <td   width="100%"> <table   class=td   cellspacing="0"   cellpadding="0"   style="width:100%"> '+ 
    ' <tr   id=pltsPoptop   > <th   height=18   valign=bottom> <b> <p   id=topleft   align=left> ↖'+pltsTitle+' </p> <p   id=topright   align=right   style="display:none"> '+pltsTitle+'↗ </font> </b> </th> </tr> '+ 
    ' <tr> <td   "+attr+"   class=bg_td   style="padding-left:14px;padding-right:14px;padding-top:   6px;padding-bottom:6px;line-height:135%"> '+Msg+' </td> </tr> '+ 
    ' <tr   id=pltsPopbot   style="display:none"> <th   height=18   valign=bottom> <b> <p   id=botleft   align=left> ↙'+pltsTitle+' </p> <p   id=botright   align=right   style="display:none"> '+pltsTitle+'↘ </font> </b> </th> </tr> '+ 
    ' </table> </td> </tr> </table> '; 
    pltsTipLayer.innerHTML=content; 
    toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.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.body.clientHeight) 
    { 
    popTopAdjust=-popHeight-pltsoffsetY*1.5; 
    pltsPoptop.style.display="none"; 
    pltsPopbot.style.display=""; 
    } 
    else 
    { 
    popTopAdjust=0; 
    pltsPoptop.style.display=""; 
    pltsPopbot.style.display="none"; 
    } 
    if(MouseX+pltsoffsetX+popWidth> document.body.clientWidth) 
    { 
    popLeftAdjust=-popWidth-pltsoffsetX*2; 
    topleft.style.display="none"; 
    botleft.style.display="none"; 
    topright.style.display=""; 
    botright.style.display=""; 
    } 
    else 
    { 
    popLeftAdjust=0; 
    topleft.style.display=""; 
    botleft.style.display=""; 
    topright.style.display="none"; 
    botright.style.display="none"; 
    } 
    pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust; 
    pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust; 
    return   true; 
    } 
    pltsinits(); </script> </head> 
    <body> 
    <div style=" width:1000px; padding-top:200px;"></div>
    <table >
      <tr>
      <td height='20'>
      <a href=http://www.car5u.com/board.aspx?boardid=6 style=" font-size:12px;" target=_blank alt='新闻标题：陈好化身美丽蝴蝶大使   娇美可人引蝴蝶驻留 <br> 发   布   人：站长 <br> 浏览次数：59   人次 <br> 整理时间：2007-5-6   9:23:41'>陈好化身美丽蝴蝶大使</a>   
      </td>
      </tr>
    <tr>
      <td height='20'>
      <a href=http://www.car5u.com/board.aspx?boardid=6 style=" font-size:12px;" target=_blank alt='新闻标题：陈好化身美丽蝴蝶大使   娇美可人引蝴蝶驻留 <br> 发   布   人：站长 <br> 浏览次数：59   人次 <br> 整理时间：2007-5-6   9:23:41'>陈好化身美丽蝴蝶大使</a>   
      </td>
      </tr>
     </table>  
    </body> </html> 
      

  6.   

    直接使用TOOLTIP就是了....
    或者自己做一个层!!!!!
      

  7.   

    放一个gif做那个小箭头就行了
      

  8.   

    你先注册一下，然后就能下了http://www.codeproject.com/KB/scripting/jsballoon.aspx
      

  9.   

    我知道了，楼主要的是有一个向下的像CSDN的那种三角指示样式是吧
    那个就是一张图片而已，用DIV加上一个背景图片就成了