欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2014年01月14日 10:09:49   作者:  
本篇文章主要介紹了利用JQuery制作符合Web標準的QQ彈出消息。這里所說的彈出消息指的是在網(wǎng)頁右下角升起又下去的那種框框,在這里用到了jQuery的自定義動畫

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

基本思路是這樣子滴:首先彈出消息框其實就是一個div層,頁面加載完了以后我們應該通過CSS把div層定位到頁面右下角的下方,并且把他隱藏起來,然后當我們點擊頁面中的按鈕的時候就觸發(fā)動畫函數(shù),div層開始從下往上升,在這里我們?yōu)榱嗽黾右曈X感,在上升的過程中有透明度的漸變,然后div層中有一個關閉按鈕,點擊后又觸發(fā)另一個動畫函數(shù),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>

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

這個問題的關鍵在于,F(xiàn)irefox以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>

相關文章

  • jquery點擊縮略圖切換視頻播放特效代碼分享

    jquery點擊縮略圖切換視頻播放特效代碼分享

    這篇文章主要介紹了jquery點擊縮略圖切換視頻播放,我們可以點擊縮略圖切換不同的視頻進行播放,過去是實現(xiàn)圖片切換現(xiàn)在有進一步實現(xiàn)視頻切換,感興趣的小伙伴可以參考下。
    2015-09-09
  • jQuery實現(xiàn)統(tǒng)計輸入文字個數(shù)的方法

    jQuery實現(xiàn)統(tǒng)計輸入文字個數(shù)的方法

    這篇文章主要介紹了jQuery實現(xiàn)統(tǒng)計輸入文字個數(shù)的方法,涉及jQuery操作鼠標事件及dom元素的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-03-03
  • jQuery圖片加載顯示loading效果

    jQuery圖片加載顯示loading效果

    這篇文章主要為大家詳細介紹了jQuery圖片加載顯示loading效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • jquery插件實現(xiàn)掃雷游戲(3)

    jquery插件實現(xiàn)掃雷游戲(3)

    這篇文章主要介紹了jquery插件實現(xiàn)掃雷游戲的第三篇,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-04-04
  • TextArea不支持maxlength的解決辦法(jquery)

    TextArea不支持maxlength的解決辦法(jquery)

    自己寫了一個jquery的擴展,這樣就可以很容易實現(xiàn)對textarea控制最大長度了。
    2011-09-09
  • JS與jQuery實現(xiàn)隔行變色的方法

    JS與jQuery實現(xiàn)隔行變色的方法

    這篇文章主要介紹了JS與jQuery實現(xiàn)隔行變色的方法,結(jié)合實例形式對比分析了javascript與jQuery實現(xiàn)隔行變色的具體操作步驟與相關技巧,體驗一下jQuery的華麗與簡潔,需要的朋友可以參考下
    2016-09-09
  • jquery的冒泡事件的阻止與允許(三種實現(xiàn)方法)

    jquery的冒泡事件的阻止與允許(三種實現(xiàn)方法)

    冒泡或默認的事件發(fā)生,在某些時候是不需要的,在此就需要一些可以阻止冒泡和默認的事件的方法,本文介紹三種方法做到不同程度的阻止,感興趣的朋友可以了解下,或許對你了解冒泡事件有所幫助
    2013-02-02
  • jQuery實現(xiàn)可以擴展的日歷

    jQuery實現(xiàn)可以擴展的日歷

    這篇文章主要為大家詳細介紹了jQuery實現(xiàn)可以擴展的日歷,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-12-12
  • 基于jPlayer三分屏的制作方法

    基于jPlayer三分屏的制作方法

    jPlayer是一個JavaScript寫的完全免費和開源的jQuery多媒體庫插件,這篇文章主要介紹了基于jPlayer三分屏的制作方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • 基于jquery的超簡單上下翻

    基于jquery的超簡單上下翻

    簡單上下翻,函數(shù),獲取元素。
    2010-04-04

最新評論