国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

利用JQuery制作符合Web標準的QQ彈出消息

2019-11-20 21:15:29
字體:
來源:轉載
供稿:網友

這里所說的彈出消息指的是在網頁右下角升起又下去的那種框框,在這里用到了jQuery的自定義動畫,感覺這個自定義動畫就是像flash里的形狀和漸變動畫一樣,只要定義了開頭和結尾的兩個關鍵幀,中間的動畫過程會自動完成,不用會jQuery的可去查下jQuery的幫助文檔.

基本思路是這樣子滴:首先彈出消息框其實就是一個div層,頁面加載完了以后我們應該通過CSS把div層定位到頁面右下角的下方,并且把他隱藏起來,然后當我們點擊頁面中的按鈕的時候就觸發動畫函數,div層開始從下往上升,在這里我們為了增加視覺感,在上升的過程中有透明度的漸變,然后div層中有一個關閉按鈕,點擊后又觸發另一個動畫函數,div層就往下降,如此而已,思路想好了以后就正式開始代碼的編寫工作,以下是我test.html的源碼:

復制代碼 代碼如下:

<!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">有新用戶注冊</a> 
        <a id="cloPop" href="#">關閉</a> 
    </div> 
</body> 
</html>

以上代碼經測試,是有效果出來了,不過如果大家放在多個瀏覽器里測試一下就能看到,在IE6,IE7,IE8B2,OPERA,CHROME瀏覽器里的效果都是一樣的,可是當你放到firefox里測試的時候,就會發現動畫本來應該是從下往上的,可是現在卻是從上往下,為什么會這樣子呢???
經本人多方查證,并在老師的幫助下,終于解決該問題:

這個問題的關鍵在于,Firefox以html為頁面的根元素,而IE以body為根元素。你設置了body為1800px高,但是在Firefox中,html元素的高度仍然是0,因此你的div#pop,實際上起點是最上面。

修改方法很簡單,增加一條CSS設置即可:

html{
    height:100%;
}   

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

所以搞JS,CSS是非常重要的基礎,一定要把CSS搞的非常清楚。

下面是最終源碼:

復制代碼 代碼如下:

<!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">有新用戶注冊</a> 
        <a id="cloPop" href="#">關閉</a> 
    </div> 
</body> 
</html>

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 阜宁县| 徐州市| 华坪县| 资兴市| 东方市| 敖汉旗| 太湖县| 嘉鱼县| 长治市| 丹寨县| 澜沧| 长汀县| 康平县| 鹤壁市| 叶城县| 景宁| 威宁| 德昌县| 吴川市| 云和县| 巩留县| 剑阁县| 襄汾县| 普格县| 五大连池市| 天津市| 河源市| 青河县| 承德县| 武川县| 陆丰市| 安远县| 长丰县| 晋州市| 屯昌县| 闻喜县| 嵊泗县| 延边| 灵台县| 晋江市| 德保县|