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