JSP页面右下角消息弹框的实现（由下而上）-CSDN博客

原文位置：http://blog.csdn.net/gongye1992/article/details/43735133

下面我对这个样式做了一点微调，但是核心代码没有变。

jsp页面代码为：

 
         <%@ page language= 
         "java"  
         import 
         = 
         "java.util.*"  
         pageEncoding= 
         "gb2312" 
         %>   
        
         <% 
         @page  
         import 
         = 
         "java.util.*" 
         %>   
        
         <html>   
        
         <head>   
        
         <style type= 
         "text/css" 
         >   
        
         #winpop { width:350px; height:0px; position:absolute; right: 
         0 
         ; bottom: 
         0 
         ; border:1px solid grey; margin: 
         0 
         ; padding:1px; overflow:hidden; display:none; background:#FFFFFF}   
        
         #winpop .title { width: 
         100 
         %; height:30px; line-height: 
         200 
         %; background:#7dda1a ; font-weight:bold; text-align:center; font-size:14px;color:white}   
        
         #winpop .con { width: 
         100 
         %; height:360px; line-height:80px; font-weight:bold; font-size:12px; color:#FF0000; text-decoration:underline; text-align:center}   
        
         .close { position:absolute; right:4px; top:-1px; color:#FFFFFF; cursor:pointer}   
        
         </style>   
        
         </head>   
        
         <%        
        
         //未读消息unreadList根据实际情况取   
        
         List<Map> unreadList =  
         new  
         ArrayList<Map>();   
        
         Map<String,String> map1= 
         new  
         HashMap<String,String>();   
        
         map1.put( 
         "msgId" 
         , 
         "1" 
         );   
        
         map1.put( 
         "msgContent" 
         , 
         "关于国庆放假的通知" 
         );   
        
         unreadList.add(map1);   
        
         Map<String,String> map2= 
         new  
         HashMap<String,String>();   
        
         map2.put( 
         "msgId" 
         , 
         "2" 
         );   
        
         map2.put( 
         "msgContent" 
         , 
         "祝大家国庆快乐！" 
         );   
        
         unreadList.add(map2);   
        
         int  
         num=unreadList.size();   
        
         %>   
        
         <body>   
        
         <script language= 
         "javascript"  
         type= 
         "text/javascript" 
         >   
        
         window.onload = function tanchuang() {  
         //加载   
        
         document.getElementById( 
         'winpop' 
         ).style.height =  
         '0px' 
         ; 
         //要初始化这个高度,虽然CSS里已经初始化了   
        
         setTimeout( 
         "tips_pop()" 
         , 
         0 
         ); 
        
         }   
        
         //弹出提示框 
        
         function tips_pop() {   
        
         var MsgPop = document.getElementById( 
         "winpop" 
         ); 
         //获取窗口这个对象,即ID为winpop的对象   
        
         var popH = parseInt(MsgPop.style.height); 
         //用parseInt将对象的高度转化为数字,以方便下面比较   
        
         if  
         (popH ==  
         0 
         ) {  
         //如果窗口的高度是0   
        
         MsgPop.style.display =  
         "block" 
         ; 
         //那么将隐藏的窗口显示出来   
        
         show = setInterval( 
         "changeH('up')" 
         ,  
         30 
         ); 
         //开始以每0.030秒调用函数changeH("up"),即每0.030秒向上移动一次   
        
         }  
         else  
         {  
         //否则   
        
         hide = setInterval( 
         "changeH('down')" 
         ,  
         30 
         ); 
         //开始以每0.030秒调用函数changeH("down"),即每0.030秒向下移动一次   
        
         }   
        
         }  
        
         //变化高度 
        
         function changeH(str) {   
        
         var MsgPop = document.getElementById( 
         "winpop" 
         );   
        
         var popH = parseInt(MsgPop.style.height);   
        
         if  
         (str ==  
         "up" 
         ) {  
         //如果这个参数是UP   
        
         if  
         (popH <=  
         200 
         ) {  
         //如果转化为数值的高度小于等于200、这里调整窗口高度  
        
         MsgPop.style.height = (popH +  
         4 
         ).toString() +  
         "px" 
         ; 
         //高度增加4个象素   
        
         }  
         else  
         {   
        
         clearInterval(show); 
         //否则就取消这个函数调用,意思就是如果高度超过200象度了,就不再增长了   
        
         }   
        
         }   
        
         if  
         (str ==  
         "down" 
         ) {   
        
         if  
         (popH >=  
         4 
         ) {  
         //如果这个参数是down   
        
         MsgPop.style.height = (popH -  
         4 
         ).toString() +  
         "px" 
         ; 
         //那么窗口的高度减少4个象素   
        
         }  
         else  
         {  
         //否则   
        
         clearInterval(hide);  
         //否则就取消这个函数调用,意思就是如果高度小于4个象度的时候,就不再减了   
        
         MsgPop.style.display =  
         "none" 
         ;  
         //因为窗口有边框,所以还是可以看见1~2象素没缩进去,这时候就把DIV隐藏掉   
        
         }   
        
         }   
        
         }   
        
         </script>   
        
         <% 
         if 
         (num> 
         0 
         ){ %>   
        
         <div id= 
         "winpop" 
         >   
        
         <div  
         class 
         = 
         "title"  
         >系统信息(<%=num %>)<br>   
        
         <span  
         class 
         = 
         "close"  
         onclick= 
         "tips_pop()" 
         >关闭</span></div>   
        
         <% 
         for 
         ( 
         int  
         i= 
         0 
         ;i<num;i++) { %>   
        
         <!-- 点击信息标题链接到信息明细，传递信息编号参数 -->   
        
         <a href= 
         "/XXXAction.do?msgId=<%=unreadList.get(i).get(" 
         msgId 
         ") %>" 
         >   
        
         <% 
         if 
         (String.valueOf(unreadList.get(i).get( 
         "msgContent" 
         )).length()> 
         16 
         ) {%>   
        
         <%=String.valueOf(unreadList.get(i).get( 
         "msgContent" 
         )).substring( 
         0 
         , 
         16 
         )+ 
         "..."  
         %>   
        
         <%}  
         else 
         { %>   
        
         <%=String.valueOf(unreadList.get(i).get( 
         "msgContent" 
         )) %>   
        
         <%} %>   
        
         </a><br>   
        
         <%   
        
         if 
         (i>= 
         1 
         ){ 
         //最多显示两条   
        
         break 
         ;   
        
         }   
        
         } %>   
        
         <center>   
        
         <!-- 点击查看更多未读消息 -->   
        
         <a href= 
         "/XXXAction.do %>" 
         ><font color= 
         "red" 
         >更多未读消息...</font></a></center>   
        
         </div>   
        
         <%} %>   
        
         </body>   
        
         </html>

总结：本文中采用间隔增加div的高度来达到动画效果（由右下角底部上升），关闭时也是通过间隔减少高度来实现动画。

主要用到了js中的这两个函数

 
         var show = setInterval( 
         "changeH('up')" 
         ,  
         30 
         ); 
         //开始以每0.030秒调用函数changeH("up"),即每0.030秒向上移动一次   
        
         clearInterval(show); 
         //否则就取消这个函数调用,意思就是如果高度超过200象度了,就不再增长了