快捷導(dǎo)航

利用JQuery制作符合Web標(biāo)準(zhǔn)的QQ彈出消息

更新時(shí)間：2014年01月14日 10:09:49 作者：

本篇文章主要介紹了利用JQuery制作符合Web標(biāo)準(zhǔn)的QQ彈出消息。這里所說(shuō)的彈出消息指的是在網(wǎng)頁(yè)右下角升起又下去的那種框框,在這里用到了jQuery的自定義動(dòng)畫(huà)

這里所說(shuō)的彈出消息指的是在網(wǎng)頁(yè)右下角升起又下去的那種框框,在這里用到了jQuery的自定義動(dòng)畫(huà),感覺(jué)這個(gè)自定義動(dòng)畫(huà)就是像flash里的形狀和漸變動(dòng)畫(huà)一樣,只要定義了開(kāi)頭和結(jié)尾的兩個(gè)關(guān)鍵幀,中間的動(dòng)畫(huà)過(guò)程會(huì)自動(dòng)完成,不用會(huì)jQuery的可去查下jQuery的幫助文檔.

基本思路是這樣子滴：首先彈出消息框其實(shí)就是一個(gè)div層,頁(yè)面加載完了以后我們應(yīng)該通過(guò)CSS把div層定位到頁(yè)面右下角的下方,并且把他隱藏起來(lái),然后當(dāng)我們點(diǎn)擊頁(yè)面中的按鈕的時(shí)候就觸發(fā)動(dòng)畫(huà)函數(shù),div層開(kāi)始從下往上升,在這里我們?yōu)榱嗽黾右曈X(jué)感,在上升的過(guò)程中有透明度的漸變,然后div層中有一個(gè)關(guān)閉按鈕,點(diǎn)擊后又觸發(fā)另一個(gè)動(dòng)畫(huà)函數(shù),div層就往下降,如此而已,思路想好了以后就正式開(kāi)始代碼的編寫(xiě)工作,以下是我test.html的源碼：

復(fù)制代碼代碼如下:

<!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>QQ彈出消息</title>  
    <style type="text/css">  
        #pop{   
            width: 250px;   
            height: 150px;   
            border: 1px solid #fcc;   
            background-color: yellow;   
            position: absolute;   
            right: 16px;   
            bottom: -150px;   
            display: none;   
        }   
    </style>  
    <script src="jquery.min.js" type="text/javascript"></script>  
    <script type="text/javascript">  
     $(document).ready(function() {   
            $("#pop").css("opacity", 0);   
            $("#btn").click(fun);   
            $("#cloPop").click(fun2);   
        });   

        function fun() {   /* 彈出框從下往上慢慢升起,其中還包括了透明度的變化 */   
            $("#pop").css("display", "block");   
                $("#pop").animate({   
                    bottom: "16px",   
                    opacity: 1   
                },1000);   
        }   

    function fun2() {   /* 彈出框從上往下降下去 */   
            $("#pop").css("display", "block");   
                $("#pop").animate({   
                    bottom: "-150px",   
                    opacity: 0   
                },1000);   
        }   
    </script>  
</head>  
<body style="height: 1800px;">  
    <form id="form1" runat="server">  
    <div>  
    <input type="button" value="緩緩升起的窗口" id="btn" />  
    <div id="mes"></div>  
    </div>  
    </form>  
    <div id="pop">  
        <a  target="_blank">有新用戶注冊(cè)</a>  
        <a id="cloPop" href="#">關(guān)閉</a>  
    </div>  
</body>  
</html>

以上代碼經(jīng)測(cè)試,是有效果出來(lái)了,不過(guò)如果大家放在多個(gè)瀏覽器里測(cè)試一下就能看到,在IE6,IE7,IE8B2,OPERA,CHROME瀏覽器里的效果都是一樣的,可是當(dāng)你放到firefox里測(cè)試的時(shí)候,就會(huì)發(fā)現(xiàn)動(dòng)畫(huà)本來(lái)應(yīng)該是從下往上的,可是現(xiàn)在卻是從上往下,為什么會(huì)這樣子呢???
經(jīng)本人多方查證,并在老師的幫助下,終于解決該問(wèn)題:

這個(gè)問(wèn)題的關(guān)鍵在于，F(xiàn)irefox以html為頁(yè)面的根元素，而IE以body為根元素。你設(shè)置了body為1800px高，但是在Firefox中，html元素的高度仍然是0，因此你的div#pop，實(shí)際上起點(diǎn)是最上面。

修改方法很簡(jiǎn)單，增加一條CSS設(shè)置即可：

html{
height:100%;
}

這樣，一開(kāi)始的時(shí)候，html的高度充滿瀏覽器窗口，pop就到底下去了，效果和在IE中完全相同。

所以搞JS，CSS是非常重要的基礎(chǔ)，一定要把CSS搞的非常清楚。

下面是最終源碼:

復(fù)制代碼代碼如下:

<!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>QQ彈出消息</title>  
    <style type="text/css">  
    html{   
        height: 100%;   
    }   
        #pop{   
            width: 250px;   
            height: 150px;   
            border: 1px solid #fcc;   
            background-color: yellow;   
            position: absolute;   
            right: 16px;   
            bottom: -150px;   
            display: none;   
        }   
    </style>  
    <script src="jquery.min.js" type="text/javascript"></script>  
    <script type="text/javascript">  
     $(document).ready(function() {   
            $("#pop").css("opacity", 0);   
            $("#btn").click(fun);   
            $("#cloPop").click(fun2);   
        });   

        function fun() {   /* 彈出框從下往上慢慢升起,其中還包括了透明度的變化 */   
            $("#pop").css("display", "block");   
                $("#pop").animate({   
                    bottom: "16px",   
                    opacity: 1   
                },1000);   
        }   

        function fun2() {   /* 彈出框從上往下降下去 */   
            $("#pop").css("display", "block");   
                $("#pop").animate({   
                    bottom: "-150px",   
                    opacity: 0   
                },1000);   
        }   
    </script>  
</head>  
<body style="height: 1800px;">  
    <form id="form1" runat="server">  
    <div>  
    <input type="button" value="緩緩升起的窗口" id="btn" />  
    <div id="mes"></div>  
    </div>  
    </form>  
    <div id="pop">  
        <a  target="_blank">有新用戶注冊(cè)</a>  
        <a id="cloPop" href="#">關(guān)閉</a>  
    </div>  
</body>  
</html>