javascript 進度條的幾種方法

2019-11-21 01:20:35

字體：大中小

來源：轉載

供稿：網友

我們先看看最終效果：

第一步，基本
構建基本的代碼，看效果演示：

第二步，給進度條增加文字顯示

<!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; } /*進度條樣式*/ .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; } /*絕對定位*/ .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; } /*絕對定位 + 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="iwvjtn8m0"   class="wrap">     <h1>2，給進度條增加文字顯示</h1>               一個進度條需要包含對應的進度文字顯示，本例中，我希望文字顯示在進度條的中間。     接下來，我們在進度條元素內增加一個顯示 文字的div。          很顯然，直接添加div后，div會占據原先綠色進度條的位置。看下面例子：               <div   id="iwvjtn8m0"   class="progressbar_1">         <div >50%</div>         <div   id="iwvjtn8m0"   class="bar" style="width: 50%;"></div>     </div>          那么有什么辦法使得文字 和 綠色進度條 同時顯示在 一起呢？          估計你也想到了，那就是絕對定位。通過對父元素添加相對定位，然后給子元素添加絕對定位，設置子元素的左邊距和上邊距都為0。          看下面的例子：          <div   id="iwvjtn8m0"   class="progressbar_2">         <div   id="iwvjtn8m0"   class="text">50%</div>         <div   id="iwvjtn8m0"   class="bar" style="width: 50%;"></div>     </div>          這時你會發現文字被遮蓋了，相信你第一時間就會想到用 z-index 去設置他們的層級關系。     對，我也選擇的是它。通過給他們設置不同的z-index值來確定層級關系，值越大越顯示在上面。看下面例子：     <div   id="iwvjtn8m0"   class="progressbar_3">         <div   id="iwvjtn8m0"   class="text">50%</div>         <div   id="iwvjtn8m0"   class="bar" style="width: 50%;"></div>     </div>          <div   id="iwvjtn8m0"   class="progressbar_3">         <div   id="iwvjtn8m0"   class="text">80%</div>         <div   id="iwvjtn8m0"   class="bar" style="width: 80%;"></div>     </div>          <div   id="iwvjtn8m0"   class="progressbar_3">         <div   id="iwvjtn8m0"   class="text">100%</div>         <div   id="iwvjtn8m0"   class="bar" style="width: 100%;"></div>     </div>          這是第一種方式，也是目前最為流行的 制作進度條的方式。     他的原理就是采用 相對定位和絕對定位，然后通過背景不同來控制進度。     接下來我們看第二種方式制作進度條。           </div> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

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

<!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="iwvjtn8m0"   class="wrap">     <h1>3，制作進度條的第二種方式---直接使用圖片+背景圖片</h1>               <img class="progress" width="152" height="18" title="0%" alt="0%" src="https://www.jb51.netimg/bg.gif" style="background-position:-152px 50%;"/>                   <img class="progress" width="152" height="18" title="20%" alt="20%" src="https://www.jb51.netimg/bg.gif" style="background-position:-120px 50%;"/>               <img class="progress" width="152" height="18" title="50%" alt="50%" src="https://www.jb51.netimg/bg.gif" style="background-position:-76px 50%;"/>               <img class="progress" width="152" height="18" title="80%" alt="80%" src="https://www.jb51.netimg/bg.gif" style="background-position:-30px 50%;"/>          <img class="progress" width="152" height="18" title="100%" alt="100%" src="https://www.jb51.netimg/bg.gif" style="background-position: 0 50%;"/>               如果你想在上面進度條上添加進度顯示的文字，你應該知道怎么辦了（如果你仔細閱讀過前面的例子的話）。     對，就是使用絕對定位+相對定位來控制。          <div   id="iwvjtn8m0"   class="progressbar_3">         <div   id="iwvjtn8m0"   class="text">0%</div>         <img class="progress" width="152" height="18" title="0%" alt="0%" src="https://www.jb51.netimg/bg.gif" style="background-position:-152px 50%;"/>     </div>          <div   id="iwvjtn8m0"   class="progressbar_3">         <div   id="iwvjtn8m0"   class="text">20%</div>         <img class="progress" width="152" height="18" title="20%" alt="20%" src="https://www.jb51.netimg/bg.gif" style="background-position:-120px 50%;"/>     </div>          <div   id="iwvjtn8m0"   class="progressbar_3">         <div   id="iwvjtn8m0"   class="text">50%</div>         <img class="progress" width="152" height="18" title="50%" alt="50%" src="https://www.jb51.netimg/bg.gif" style="background-position:-76px 50%;"/>     </div>          <div   id="iwvjtn8m0"   class="progressbar_3">         <div   id="iwvjtn8m0"   class="text">80%</div>         <img class="progress" width="152" height="18" title="80%" alt="80%" src="https://www.jb51.netimg/bg.gif" style="background-position:-30px 50%;"/>     </div>          <div   id="iwvjtn8m0"   class="progressbar_3">         <div   id="iwvjtn8m0"   class="text">100%</div>         <img class="progress" width="152" height="18" title="100%" alt="100%" src="https://www.jb51.netimg/bg.gif" style="background-position: 0 50%;"/>     </div>          這種方式的原理就是 利用 一張img圖片，然后給img圖片又設置背景圖，通過背景圖的background position 屬性 來顯示不同的部分。     當然這種方式 對圖片有點要求 。你仔細一點就會發現，寬度是img的2倍。     另外圖片必須是gif透明的，也就是說空心的。呵呵。看不到進度條。     總的來說，這應該算一個技巧，在實際項目中，也是能使用的。          <p style="float:right;">Dev By <a href="http://m.survivalescaperooms.com" >VeVB.COm</a></p>           </div> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

這種方式的原理就是利用一張img圖片，然后給img圖片又設置背景圖，通過背景圖的background position 屬性來顯示不同的部分。
當然這種方式對圖片有點要求。你仔細一點就會發現，寬度是img的2倍。
另外圖片必須是gif透明的，也就是說空心的。呵呵。看不到進度條。例子中background-position是用的px值，實際可以采用 % 來控制更精確，比如: background-position:80% 50%;等。
總的來說，這應該算一個技巧，在實際項目中，也是能使用的。

第四步，應用
最后我們看一個簡單的應用：

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

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

上一篇：Jquery中的offset()和position()深入剖析

下一篇：JS 文字符串轉換unicode編碼函數