|
|
第一步，基本
構建基本的代碼，看效果演示：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
第二步，給進度條增加文字顯示
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
他的原理就是采用 相對定位和絕對定位，然后通過背景不同來控制進度。 接下來我們看第二種方式制作進度條。
第三步，制作進度條的第二種方式---直接使用圖片+背景圖片
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
這種方式的原理就是 利用 一張img圖片，然后給img圖片又設置背景圖，通過背景圖的background position 屬性 來顯示不同的部分。
當然這種方式 對圖片有點要求 。你仔細一點就會發現，寬度是img的2倍。
另外圖片必須是gif透明的，也就是說空心的。呵呵。看不到進度條。例子中background-position是用的px值，實際可以采用 % 來控制 更精確， 比如: background-position:80% 50%;等。
總的來說，這應該算一個技巧，在實際項目中，也是能使用的。
第四步，應用
最后我們看一個簡單的應用：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
通過animate來控制圖片的background-position來達到進度條效果。
當然你也可以使用第一種方式做，第一種方式需要改變的是進度條的 width 屬性。
文件打包下載
JavaScript技術：javascript 進度條的幾種方法，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
