亚洲婷婷国产精品电影人久久,亚洲成人人体,91精品国产综合久久香蕉922

這里所說(shuō)的彈出消息指的是在網(wǎng)頁(yè)右下角升起又下去的那種框框,在這里用到了jQuery的自定義動(dòng)畫,感覺(jué)這個(gè)自定義動(dòng)畫就是像flash里的形狀和漸變動(dòng)畫一樣,只要定義了開頭和結(jié)尾的兩個(gè)關(guān)鍵幀,中間的動(dòng)畫過(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)畫函數(shù),div層開始從下往上升,在這里我們?yōu)榱嗽黾右曈X(jué)感,在上升的過(guò)程中有透明度的漸變,然后div層中有一個(gè)關(guān)閉按鈕,點(diǎn)擊后又觸發(fā)另一個(gè)動(dòng)畫函數(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">有新用戶注冊(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)畫本來(lái)應(yīng)該是從下往上的,可是現(xiàn)在卻是從上往下,為什么會(huì)這樣子呢???
經(jīng)本人多方查證,并在http://learning.artech.cn老師的幫助下,終于解決該問(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%;
}???

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

所以搞JS，CSS是非常重要的基礎(chǔ)，一定要把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">有新用戶注冊(cè)</a>
		<a id="cloPop" href="#">關(guān)閉</a>
    </div>
</body>
</html>

制作符合WEB標(biāo)準(zhǔn)的QQ彈出消息(jQuery)

更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號(hào)聯(lián)系： 360901061

您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對(duì)您有幫助就好】元

2元

5元

10元

20元

自定義

日韩久久久精品,亚洲精品久久久久久久久久久,亚洲欧美一区二区三区国产精品 ,一区二区福利