最近项目中需要实现类似chinaren中的小纸条功能,希望哪位高手不吝赐教!!!

解决方案 »

  1.   

       右下方的那个小窗口吗?还是其它的?是实时通知 的吧?这个是用AJAX做的。。我没进过CHINAREN。不太清楚是怎么个样子。。帮你顶下。。
      

  2.   

    使用ajax定时Timer弹出DIV或页面
    http://topic.csdn.net/u/20090921/12/f261ba7c-4273-4f7d-b7d3-db94353c4ff6.html
      

  3.   

    用jQuery做吧 那个简单后台做这个比价麻烦
      

  4.   

    <html> 
    <head> 
        <title>网页特效观止|JsCode.CN|---页面右下角弹出类似QQ或MSN的消息提示 </title>     <script language="JavaScript">  
            <!--  
              
            /**//*  
            **    ==================================================================================================  
            **    类名:CLASS_MSN_MESSAGE  
            **    功能:提供类似MSN消息框  
            **    示例:  
                ---------------------------------------------------------------------------------------------------  
              
                        var MSG = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示:","您有1封消息","今天请我吃饭哈");  
                            MSG.show();  
              
                ---------------------------------------------------------------------------------------------------  
            **    作者:ttyp  
            **    邮件:[email protected]  
            **    日期:2005-3-18  
            **    ==================================================================================================  
            **/  
              
              
            /**//*  
            *    消息构造  
            */  
            function CLASS_MSN_MESSAGE(id,width,height,caption,title,message,target,action){  
                this.id    = id;  
                this.title  = title;  
                this.caption= caption;  
                this.message= message;  
                this.target = target;  
                this.action = action;  
                this.width  = width?width:200;  
                this.height = height?height:120;  
                this.timeout= 150;  
                this.speed    = 20; 
                this.step    = 1; 
                this.right    = screen.width -1;  
                this.bottom = screen.height; 
                this.left    = this.right - this.width; 
                this.top    = this.bottom - this.height; 
                this.timer    = 0; 
                this.pause    = false; 
                this.close    = false; 
                this.autoHide    = true; 
            }  
              
            /**//*  
            *    隐藏消息方法  
            */  
            CLASS_MSN_MESSAGE.prototype.hide = function(){  
                if(this.onunload()){                  var offset  = this.height>this.bottom-this.top?this.height:this.bottom-this.top; 
                    var me  = this;                  if(this.timer>0){  
                        window.clearInterval(me.timer);  
                    }                  var fun = function(){  
                        if(me.pause==false||me.close){ 
                            var x  = me.left; 
                            var y  = 0; 
                            var width = me.width; 
                            var height = 0; 
                            if(me.offset>0){ 
                                height = me.offset; 
                            } 
                
                            y  = me.bottom - height; 
                
                            if(y>=me.bottom){ 
                                window.clearInterval(me.timer);  
                                me.Pop.hide();  
                            } else { 
                                me.offset = me.offset - me.step;  
                            } 
                            me.Pop.show(x,y,width,height);    
                        }            
                    }                  this.timer = window.setInterval(fun,this.speed)      
                }  
            }  
              
            /**//*  
            *    消息卸载事件,可以重写  
            */  
            CLASS_MSN_MESSAGE.prototype.onunload = function() {  
                return true;  
            }  
            /**//*  
            *    消息命令事件,要实现自己的连接,请重写它  
            *  
            */  
            CLASS_MSN_MESSAGE.prototype.oncommand = function(){  
                //this.close = true; 
                this.hide();  
            window.open("http://www.baidu.com"); 
              
            } 
            /**//*  
            *    消息显示方法  
            */  
            CLASS_MSN_MESSAGE.prototype.show = function(){              var oPopup = window.createPopup(); //IE5.5+  
                
                this.Pop = oPopup;  
              
                var w = this.width;  
                var h = this.height;  
              
                var str = " <DIV style='BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX: 99999; LEFT: 0px; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: " + w + "px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: " + h + "px; BACKGROUND-COLOR: #c9d3f3'>"  
                    str += " <TABLE style='BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid' cellSpacing=0 cellPadding=0 width='100%' bgColor=#cfdef4 border=0>"  
                    str += " <TR>"  
                    str += " <TD style='FONT-SIZE: 12px;COLOR: #0f2c8c' width=30 height=24> </TD>"  
                    str += " <TD style='PADDING-LEFT: 4px; FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #1f336b; PADDING-TOP: 4px' vAlign=center width='100%'>" + this.caption + " </TD>"  
                    str += " <TD style='PADDING-RIGHT: 2px; PADDING-TOP: 2px' vAlign=center align=right width=19>"  
                    str += " <SPAN title=关闭 style='FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: red; MARGIN-RIGHT: 4px' id='btSysClose' >× </SPAN> </TD>"  
                    str += " </TR>"  
                    str += " <TR>"  
                    str += " <TD style='PADDING-RIGHT: 1px;PADDING-BOTTOM: 1px' colSpan=3 height=" + (h-28) + ">"  
                    str += " <DIV style='BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 8px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 8px; FONT-SIZE: 12px; PADDING-BOTTOM: 8px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 8px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%'>" + this.title + " <BR> <BR>"  
                    str += " <DIV style='WORD-BREAK: break-all' align=left> <A href='javascript:void(0)' hidefocus=false id='btCommand'> <FONT color=#ff0000>" + this.message + " </FONT> </A>fghfghfghghghgh <A href='http://www.sohu.com' hidefocus=false id='ommand'> <FONT color=#ff0000>dfgdfgfg </FONT> </A> </DIV>"  
                    str += " </DIV>"  
                    str += " </TD>"  
                    str += " </TR>"  
                    str += " </TABLE>"  
                    str += " </DIV>"  
              
                oPopup.document.body.innerHTML = str; 
                
              
                this.offset  = 0; 
                var me  = this;              oPopup.document.body.onmouseover = function(){me.pause=true;} 
                oPopup.document.body.onmouseout = function(){me.pause=false;}             var fun = function(){  
                    var x  = me.left; 
                    var y  = 0; 
                    var width    = me.width; 
                    var height    = me.height;                     if(me.offset>me.height){ 
                            height = me.height; 
                        } else { 
                            height = me.offset; 
                        }                 y  = me.bottom - me.offset; 
                    if(y <=me.top){ 
                        me.timeout--; 
                        if(me.timeout==0){ 
                            window.clearInterval(me.timer);  
                            if(me.autoHide){ 
                                me.hide(); 
                            } 
                        } 
                    } else { 
                        me.offset = me.offset + me.step; 
                    } 
                    me.Pop.show(x,y,width,height);                }  
              
                this.timer = window.setInterval(fun,this.speed)      
              
                
              
                var btClose = oPopup.document.getElementById("btSysClose");  
              
                btClose.onclick = function(){  
                    me.close = true; 
                    me.hide();  
                }  
              
                var btCommand = oPopup.document.getElementById("btCommand");  
                btCommand.onclick = function(){  
                    me.oncommand();  
                }    
            var ommand = oPopup.document.getElementById("ommand");  
                  ommand.onclick = function(){  
                  //this.close = true; 
                me.hide();  
            window.open(ommand.href); 
                }  
            }  
            /**//* 
            ** 设置速度方法 
            **/ 
            CLASS_MSN_MESSAGE.prototype.speed = function(s){ 
                var t = 20; 
                try { 
                    t = praseInt(s); 
                } catch(e){} 
                this.speed = t; 
            } 
            /**//* 
            ** 设置步长方法 
            **/ 
            CLASS_MSN_MESSAGE.prototype.step = function(s){ 
                var t = 1; 
                try { 
                    t = praseInt(s); 
                } catch(e){} 
                this.step = t; 
            } 
              
            CLASS_MSN_MESSAGE.prototype.rect = function(left,right,top,bottom){ 
                try { 
                    this.left        = left    !=null?left:this.right-this.width; 
                    this.right        = right    !=null?right:this.left +this.width; 
                    this.bottom        = bottom!=null?(bottom>screen.height?screen.height:bottom):screen.height; 
                    this.top        = top    !=null?top:this.bottom - this.height; 
                } catch(e){} 
            } 
            var MSG1 = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示:","您有1封消息","今天请我吃饭哈");  
                MSG1.rect(null,null,null,screen.height-50); 
                MSG1.speed    = 10; 
                MSG1.step    = 5; 
                //alert(MSG1.top); 
                MSG1.show(); 
    //        同时两个有闪烁,只能用层代替了,不过层不跨框架 
    //        var MSG2 = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示:","您有2封消息","好的啊");  
    //          MSG2.rect(100,null,null,screen.height); 
    //            MSG2.show();  
            //-->  
        </script>     <meta content="MSHTML 6.00.2800.1106" name="GENERATOR"> 
    </head> 
    <body> 
        <form runat="server"> 
        </form> 
    </body> 
    </html>
      

  5.   

    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>弹出提示小窗口示例 </title> 
    <style type="text/css"> 
    * {margin:0px;padding:0px;} 
    html,body { height:100%;} 
    body { font-size:14px; line-height:24px;} 
    #tip { 
    position: absolute; 
    right: 0px; 
    bottom: 0px; 
    height: 0px; 
    width: 180px; 
    border: 1px solid #CCCCCC; 
    background-color: #eeeeee; 
    padding: 1px; 
    overflow:hidden; 
    display:none; 
    font-size:12px; 
    z-index:10; 

    #tip p { padding:6px;} 
    #tip h1,#detail h1 { 
    font-size:14px; 
    height:25px; 
    line-height:25px; 
    background-color:#0066CC; 
    color:#FFFFFF; 
    padding:0px 3px 0px 3px; 
    filter: Alpha(Opacity=100); 

    #tip h1 a,#detail h1 a { 
    float:right; 
    text-decoration:none; 
    color:#FFFFFF; 

    #shadow { 
    position:absolute; 
    width:100%; 
    height:100%; 
    background-color:#000000; 
    z-index:11; 
    filter: Alpha(Opacity=70); 
    display:none; 
    overflow:hidden; 

    #detail { 
    width:500px; 
    height:200px; 
    border:3px double #ccc; 
    background-color:#FFFFFF; 
    position:absolute; 
    z-index:30; 
    display:none; 
    left:30%; 
    top:30% 

    </style> 
    <script type="text/javascript"> 
    var handle; 
    function start() 

    var obj = document.getElementById("tip"); 
    if (parseInt(obj.style.height)==0) 
    { obj.style.display="block"; 
      handle = setInterval("changeH('up')",2); 
    }else 

        handle = setInterval("changeH('down')",2) 


    function changeH(str) 

    var obj = document.getElementById("tip"); 
    if(str=="up") 

      if (parseInt(obj.style.height)>200) 
      clearInterval(handle); 
      else 
      obj.style.height=(parseInt(obj.style.height)+8).toString()+"px"; 

    if(str=="down") 

      if (parseInt(obj.style.height) <8) 
      { clearInterval(handle); 
      obj.style.display="none"; 
      } 
      else  
      obj.style.height=(parseInt(obj.style.height)-8).toString()+"px"; 


    function showwin() 

    document.getElementsByTagName("html")[0].style.overflow = "hidden"; 
    start(); 
    document.getElementById("shadow").style.display="block"; 
    document.getElementById("detail").style.display="block"; 

    function recover() 

    document.getElementsByTagName("html")[0].style.overflow = "auto"; 
    document.getElementById("shadow").style.display="none"; 
    document.getElementById("detail").style.display="none";  

    </script> 
    </head> 
    <body onload="document.getElementById('tip').style.height='0px'"> 
    <div id="shadow"> </div> 
    <div id="detail"> </div> 
    <div id="tip"> <h1> <a href="javascript:void(0)" onclick="start()">× </a>消息提示 </h1> <p> <a href="javascript:void(0)" onclick="showwin()">查看详细 </a> </p> </div> 
    <p> <a href="#" onclick="start()">点击测试 </a> <br> <br> <br> <br> </body> 
    </html> 
      

  6.   

    那就用AJAX,时刻监视一个流程表,有信息,就弹出来
      

  7.   

    下载PopupWin.dll1 引用EeekSoft.Web.PopupWin.dll引用
    2 index.aspx页面上使用
    <%@ Register Assembly="EeekSoft.Web.PopupWin" Namespace="EeekSoft.Web" TagPrefix="cc1" %>
    在页面上要显示的位置引用,这里假设显示在页面右下角
          <cc1:popupwin id="PopupWin1" runat="server" message="" text="" title="友情提示" HideAfter="10000" OffsetX="0" OffsetY="0"></cc1:popupwin>
    3 index.aspx.cs    protected void Page_Load(object sender, EventArgs e)
        {
            PopupWin1.Message = "欢迎您";    }