快捷導(dǎo)航

javascript 進(jìn)度條的幾種方法

更新時(shí)間：2009年05月31日 00:12:57 作者：

在實(shí)際項(xiàng)目中，進(jìn)度條的用處還是非常大的。這篇文章主要是要介紹幾種制作進(jìn)度條的方法。通過學(xué)習(xí)，你也能制作屬于自己的進(jìn)度條了。

我們先看看最終效果：

第一步，基本
構(gòu)建基本的代碼，看效果演示：

<!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> <title>制作進(jìn)度條的兩種方法</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> *{     margin:0;     padding:0; } body{font-size:12px;}h1{font-size:15px;} .wrap{     font-size: 12px;     margin:40px auto;     width:400px; } /*進(jìn)度條樣式*/ .progressbar_1{     background-color:#eee;     height:16px;     width:150px;     border:1px solid #bbb;     color:#222; } .progressbar_1 .bar {     background-color:#6CAF00;     height:16px;     width:0; } </style> </head> <body> <div   id="ublnpf9mb"   class="wrap">     <h1>1，構(gòu)建基本的HTML結(jié)構(gòu)和CSS樣式</h1>          0%的狀態(tài)：     <div   id="ublnpf9mb"   class="progressbar_1">         <div   id="ublnpf9mb"   class="bar"></div>     </div>          50%的狀態(tài)：     <div   id="ublnpf9mb"   class="progressbar_1">         <div   id="ublnpf9mb"   class="bar" style="width: 50%;"></div>     </div>          80%的狀態(tài)：     <div   id="ublnpf9mb"   class="progressbar_1">         <div   id="ublnpf9mb"   class="bar" style="width: 80%;"></div>     </div>               100%的狀態(tài)：     <div   id="ublnpf9mb"   class="progressbar_1">         <div   id="ublnpf9mb"   class="bar" style="width: 100%;"></div>     </div>          這步非常簡單，相信大家都能看明白。 </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

第二步，給進(jìn)度條增加文字顯示

<!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> <title>制作進(jìn)度條的兩種方法</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> *{     margin:0;     padding:0; } body{font-size:12px;}h1{font-size:15px;} .wrap{     font-size: 12px;     margin:40px auto;     width:400px; } /*進(jìn)度條樣式*/ .progressbar_1{     background-color:#eee;     color:#222;     height:16px;     width:150px;     border:1px solid #bbb; } .progressbar_1 .bar {     background-color:#6CAF00;     height:16px;     width:0; } /*絕對(duì)定位*/ .progressbar_2{     background-color:#eee;     color:#222;     height:16px;     width:150px;     border:1px solid #bbb;     text-align:center;     position:relative; } .progressbar_2 .bar {     background-color:#6CAF00;     height:16px;     width:0;     position:absolute;     left:0;     top:0; } .progressbar_2 .text {     height:16px;     position:absolute;     left:0;     top:0;     width:100%;     line-height:16px; } /*絕對(duì)定位 + z-index */ .progressbar_3{     background-color:#eee;     color:#222;     height:16px;     width:150px;     border:1px solid #bbb;     text-align:center;     position:relative; } .progressbar_3 .bar {     background-color:#6CAF00;     height:16px;     width:0;     position:absolute;     left:0;     top:0;     z-index:10; } .progressbar_3 .text {     height:16px;     position:absolute;     left:0;     top:0;     width:100%;     line-height:16px;          z-index:100; } </style> </head> <body> <div   id="ublnpf9mb"   class="wrap">     <h1>2，給進(jìn)度條增加文字顯示</h1>               一個(gè)進(jìn)度條需要包含對(duì)應(yīng)的進(jìn)度文字顯示，本例中，我希望文字顯示在進(jìn)度條的中間。     接下來，我們?cè)谶M(jìn)度條元素內(nèi)增加一個(gè)顯示 文字的div。          很顯然，直接添加div后，div會(huì)占據(jù)原先綠色進(jìn)度條的位置。看下面例子：               <div   id="ublnpf9mb"   class="progressbar_1">         <div >50%</div>         <div   id="ublnpf9mb"   class="bar" style="width: 50%;"></div>     </div>          那么有什么辦法使得文字 和 綠色進(jìn)度條 同時(shí)顯示在 一起呢？          估計(jì)你也想到了，那就是絕對(duì)定位。通過對(duì)父元素添加相對(duì)定位，然后給子元素添加絕對(duì)定位，設(shè)置子元素的左邊距和上邊距都為0。          看下面的例子：          <div   id="ublnpf9mb"   class="progressbar_2">         <div   id="ublnpf9mb"   class="text">50%</div>         <div   id="ublnpf9mb"   class="bar" style="width: 50%;"></div>     </div>          這時(shí)你會(huì)發(fā)現(xiàn)文字被遮蓋了，相信你第一時(shí)間就會(huì)想到用 z-index 去設(shè)置他們的層級(jí)關(guān)系。     對(duì)，我也選擇的是它。通過給他們?cè)O(shè)置不同的z-index值來確定層級(jí)關(guān)系，值越大越顯示在上面?？聪旅胬樱?    <div   id="ublnpf9mb"   class="progressbar_3">         <div   id="ublnpf9mb"   class="text">50%</div>         <div   id="ublnpf9mb"   class="bar" style="width: 50%;"></div>     </div>          <div   id="ublnpf9mb"   class="progressbar_3">         <div   id="ublnpf9mb"   class="text">80%</div>         <div   id="ublnpf9mb"   class="bar" style="width: 80%;"></div>     </div>          <div   id="ublnpf9mb"   class="progressbar_3">         <div   id="ublnpf9mb"   class="text">100%</div>         <div   id="ublnpf9mb"   class="bar" style="width: 100%;"></div>     </div>          這是第一種方式，也是目前最為流行的 制作進(jìn)度條的方式。     他的原理就是采用 相對(duì)定位和絕對(duì)定位，然后通過背景不同來控制進(jìn)度。     接下來我們看第二種方式制作進(jìn)度條。           </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

他的原理就是采用相對(duì)定位和絕對(duì)定位，然后通過背景不同來控制進(jìn)度。接下來我們看第二種方式制作進(jìn)度條。
第三步，制作進(jìn)度條的第二種方式---直接使用圖片+背景圖片

<!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> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> *{     margin:0;     padding:0; } body{font-size:12px;}h1{font-size:15px;} .wrap{     font-size: 12px;     margin:40px auto;     width:400px; } /*不帶文字*/ .progress{     border:0;     width: 152px;     height: 18px;     background:url(img/progress.gif) no-repeat -100px 50%; } /*帶文字顯示*/ .progressbar_3{     width:152px;     position:relative;     height:18px;     text-align:center;     position:relative;     color:#222; } .progressbar_3 .text{     width:152px;     position:absolute;     left:0;     top:0;     height:18px;     line-height:18px;     z-index:100; } .progressbar_3 .progress{     width:152px;     position:absolute;     left:0;     top:0;     height:18px;     z-index:10; } </style> </head> <body> <div   id="ublnpf9mb"   class="wrap">     <h1>3，制作進(jìn)度條的第二種方式---直接使用圖片+背景圖片</h1>               <img class="progress" width="152" height="18" title="0%" alt="0%" src="img/bg.gif" style="background-position:-152px 50%;"/>                   <img class="progress" width="152" height="18" title="20%" alt="20%" src="img/bg.gif" style="background-position:-120px 50%;"/>               <img class="progress" width="152" height="18" title="50%" alt="50%" src="img/bg.gif" style="background-position:-76px 50%;"/>               <img class="progress" width="152" height="18" title="80%" alt="80%" src="img/bg.gif" style="background-position:-30px 50%;"/>          <img class="progress" width="152" height="18" title="100%" alt="100%" src="img/bg.gif" style="background-position: 0 50%;"/>               如果你想在上面進(jìn)度條上添加進(jìn)度顯示的文字，你應(yīng)該知道怎么辦了（如果你仔細(xì)閱讀過前面的例子的話）。     對(duì)，就是使用絕對(duì)定位+相對(duì)定位來控制。          <div   id="ublnpf9mb"   class="progressbar_3">         <div   id="ublnpf9mb"   class="text">0%</div>         <img class="progress" width="152" height="18" title="0%" alt="0%" src="img/bg.gif" style="background-position:-152px 50%;"/>     </div>          <div   id="ublnpf9mb"   class="progressbar_3">         <div   id="ublnpf9mb"   class="text">20%</div>         <img class="progress" width="152" height="18" title="20%" alt="20%" src="img/bg.gif" style="background-position:-120px 50%;"/>     </div>          <div   id="ublnpf9mb"   class="progressbar_3">         <div   id="ublnpf9mb"   class="text">50%</div>         <img class="progress" width="152" height="18" title="50%" alt="50%" src="img/bg.gif" style="background-position:-76px 50%;"/>     </div>          <div   id="ublnpf9mb"   class="progressbar_3">         <div   id="ublnpf9mb"   class="text">80%</div>         <img class="progress" width="152" height="18" title="80%" alt="80%" src="img/bg.gif" style="background-position:-30px 50%;"/>     </div>          <div   id="ublnpf9mb"   class="progressbar_3">         <div   id="ublnpf9mb"   class="text">100%</div>         <img class="progress" width="152" height="18" title="100%" alt="100%" src="img/bg.gif" style="background-position: 0 50%;"/>     </div>          這種方式的原理就是 利用 一張img圖片，然后給img圖片又設(shè)置背景圖，通過背景圖的background position 屬性 來顯示不同的部分。     當(dāng)然這種方式 對(duì)圖片有點(diǎn)要求 。你仔細(xì)一點(diǎn)就會(huì)發(fā)現(xiàn)，寬度是img的2倍。     另外圖片必須是gif透明的，也就是說空心的。呵呵?？床坏竭M(jìn)度條。     總的來說，這應(yīng)該算一個(gè)技巧，在實(shí)際項(xiàng)目中，也是能使用的。          <p style="float:right;">Dev By <a href="http://chabaoo.cn" >jb51.net</a></p>           </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

這種方式的原理就是利用一張img圖片，然后給img圖片又設(shè)置背景圖，通過背景圖的background position 屬性來顯示不同的部分。
當(dāng)然這種方式對(duì)圖片有點(diǎn)要求。你仔細(xì)一點(diǎn)就會(huì)發(fā)現(xiàn)，寬度是img的2倍。
另外圖片必須是gif透明的，也就是說空心的。呵呵?？床坏竭M(jìn)度條。例子中background-position是用的px值，實(shí)際可以采用 % 來控制更精確，比如: background-position:80% 50%;等。
總的來說，這應(yīng)該算一個(gè)技巧，在實(shí)際項(xiàng)目中，也是能使用的。

第四步，應(yīng)用
最后我們看一個(gè)簡單的應(yīng)用：

<!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> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> *{     margin:0;     padding:0; } body{font-size:12px;}h1{font-size:15px;} .wrap{     font-size: 12px;     margin:40px auto;     width:400px; } /*不帶文字*/ .progress{     border:0;     width: 152px;     height: 18px;     background:url(img/progress.gif) no-repeat -100px 50%; } /*帶文字顯示*/ .progressbar_3{     width:152px;     position:relative;     height:18px;     text-align:center;     position:relative;     color:#222; } .progressbar_3 .text{     width:152px;     position:absolute;     left:0;     top:0;     height:18px;     line-height:18px;     z-index:100; } .progressbar_3 .progress{     width:152px;     position:absolute;     left:0;     top:0;     height:18px;     z-index:10; } </style>   </head> <body> <div   id="ublnpf9mb"   class="wrap">     <h1>4，應(yīng)用</h1>               <div   id="ublnpf9mb"   class="progressbar_3">         <div   id="ublnpf9mb"   class="text">0%</div>         <img class="progress" width="152" height="18" title="0%" alt="0%" src="img/bg.gif" style="background-position:-152px 50%;"/>     </div>          <button id="addTo" >增加至50%</button>     <button id="cutdown" >減少至20%</button>          我使用的是第二種方式來做控制，通過animate來控制圖片的background-position來達(dá)到進(jìn)度條效果。     當(dāng)然你也可以使用第一種方式做，第一種方式需要改變的是進(jìn)度條的 width 屬性。          <p style="float:right;">Dev By <a href="http://chabaoo.cn" >jb51.net</a></p>      </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

通過animate來控制圖片的background-position來達(dá)到進(jìn)度條效果。
當(dāng)然你也可以使用第一種方式做，第一種方式需要改變的是進(jìn)度條的 width 屬性。
文件打包下載

您可能感興趣的文章: