JSP頁面右下角消息彈框的實現（由下而上）

時間 2020-10-06

標籤 javascript css html java jsp ide 函數動畫 spa .net 欄目 JSP 简体版

原文原文鏈接

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

下面我對這個樣式作了一點微調，可是核心代碼沒有變。css

jsp頁面代碼爲：html

<%@ 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的高度來達到動畫效果（由右下角底部上升），關閉時也是經過間隔減小高度來實現動畫。java

主要用到了js中的這兩個函數jsp

  var show = setInterval("changeH('up')", 30);//開始以每0.030秒調用函數changeH("up"),即每0.030秒向上移動一次  
  clearInterval(show);//不然就取消這個函數調用,意思就是若是高度超過200象度了,就再也不增加了