本篇文章主要介紹了利用JQuery制作符合Web標准的QQ彈出消息。這裡所說的彈出消息指的是在網頁右下角升起又下去的那種框框,在這裡用到了jQuery的自定義動畫
這裡所說的彈出消息指的是在網頁右下角升起又下去的那種框框,在這裡用到了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 href="http://g.cn" 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 href="http://g.cn" target="_blank">有新用戶注冊</a> <a id="cloPop" href="#">關閉</a> </div> </body> </html>