用CSS+JS實現的進度條效果效果_javascript技巧

進度條,就是在用戶進入你的網站的時候,能讓用戶看到網頁下載了多少,這個的作用非常明顯---就是讓用戶的等待時間變長,可以有效的彌補空間慢的缺點(當然,你空間太慢,還是建議你換下空間,呵呵)
好了,現在我先來舉兩個例子
一個是用FLASH實現的 (這個網上很多網站都是,不說了)
一個是用動態的GIF實現的 (這個你可以看微軟官方的下載頁面,也不說了)
這里,我們的重點是用 CSS+JS 實現這個效果
好了,廢話不多說,我們開始
首先,寫一段HTML代碼

33%

好了,現在我們編寫一下CSS代碼
#loading {

width: 300px;

background-color: #000;

border : 2px solid #000;

}

這個是我們希望進度條的底色是 #000 ,黑色的,再加了一個邊框

j
接下來多 loadcss 進行設計

#loadcss {

display : block ; /*很重要, 弄成塊*/

background-color: # 0df;

text-align : center;

}

注意,這里的BLOCK 很重要的, 我們用 #0df 這種顏色來作為進度條的顏色;

好了,預覽一下

h
呵呵,不過現在是整條進度條都是滿的

那么,怎么弄可以顯示進度呢?

這里,可以用一個巧妙的方法

把HTML代碼稍微修改一下

看下面的代碼:

33%

呵呵,怎么樣,現在 顯示的就是33% 了

但是,他是不動,對吧? 好,下面我們就用 JS 來實現 一下 (這個JS不是我設計的...)

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com