首頁 > web前端 > js教程 > 利用JQuery製作符合Web標準的QQ彈出訊息_jquery

利用JQuery製作符合Web標準的QQ彈出訊息_jquery

WBOY
發布: 2016-05-16 17:04:02
原創
1177 人瀏覽過

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

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

複製程式碼 程式碼如下:



 
 
    QQ彈出訊息
   

   

    ; 
    ; 
   

     新用戶註冊; 
        關閉 
   

身體> 



以上程式碼經測試,是有效果出來了,不過如果大家放在多個瀏覽器裡測試一下就能看到,在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搞的非常清楚。

以下是最終原始碼:

複製程式碼 程式碼如下:



 
 
    QQ彈出訊息
   

    ; 
    ; 
  ="http://g.cn" target="_blank">有新用戶註冊; 
        關閉 
    ; 
身體> 



相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板