|
|
好了,現(xiàn)在我先來(lái)舉兩個(gè)例子
一個(gè)是用FLASH實(shí)現(xiàn)的 (這個(gè)網(wǎng)上很多網(wǎng)站都是,不說(shuō)了)
一個(gè)是用動(dòng)態(tài)的GIF實(shí)現(xiàn)的 (這個(gè)你可以看微軟官方的下載頁(yè)面,也不說(shuō)了)
這里,我們的重點(diǎn)是用 CSS+JS 實(shí)現(xiàn)這個(gè)效果
好了,廢話不多說(shuō),我們開(kāi)始
首先,寫(xiě)一段HTML代碼
<div id="loading">
<strong id="loadcss"> 33%</strong>
</div>
好了,現(xiàn)在我們編寫(xiě)一下CSS代碼
#loading {
width: 300px;
background-color: #000;
border : 2px solid #000;
}
這個(gè)是我們希望進(jìn)度條的底色是 #000 ,黑色的,再加了一個(gè)邊框
j
接下來(lái)多 loadcss 進(jìn)行設(shè)計(jì)
#loadcss {
display : block ; /*很重要, 弄成塊*/
background-color: # 0df;
text-align : center;
}
注意,這里的BLOCK 很重要的, 我們用 #0df 這種顏色來(lái)作為進(jìn)度條的顏色;
好了,預(yù)覽一下
h
呵呵,不過(guò)現(xiàn)在是整條進(jìn)度條都是滿(mǎn)的
那么,怎么弄可以顯示進(jìn)度呢?
這里,可以用一個(gè)巧妙的方法
把HTML代碼稍微修改一下
看下面的代碼:
<div id="loading">
<strong id="loadcss" style="width:33%;"> 33%</strong>
</div>
呵呵,怎么樣,現(xiàn)在 顯示的就是33% 了
但是,他是不動(dòng),對(duì)吧? 好,下面我們就用 JS 來(lái)實(shí)現(xiàn) 一下 (這個(gè)JS不是我設(shè)計(jì)的...)
<script language="JavaScript">
i=0;
function load () {
showload=setInterval("load()",500);
}
function setload(){
i+=5;
if (i>=100) {
clearInterval(showlaod);
}
document.getElementById("loadcss").style.width=i+"%" ;
document.getElementById("loadcss").innerHTML=i+"%";
}
</script>
OK了,這段JS主要是兩個(gè)函數(shù), 一個(gè)是 load ,用來(lái)開(kāi)啟進(jìn)度條,
第二是 setload ,用來(lái) 控制進(jìn)度條 的位置 ,在 setload設(shè)置一個(gè)計(jì)數(shù)器,每0.5秒運(yùn)行一次steload.
O K了,這段JS要放在HEAD里面,然后在BODY中調(diào)用 , 即 <BODY ONLOAD="LOAD;">
呵呵,現(xiàn)在運(yùn)行一下網(wǎng)頁(yè)試試,呵呵,是不是成功了,呵呵.
JavaScript技術(shù)：用CSS+JS實(shí)現(xiàn)的進(jìn)度條效果效果，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
