javascript 進(jìn)度條的幾種方法
更新時間：2009年05月31日 00:12:57 作者：
在實際項目中，進(jìn)度條的用處還是非常大的。這篇文章主要是要介紹幾種制作進(jìn)度條的方法。通過學(xué)習(xí)，你也能制作屬于自己的進(jìn)度條了。
我們先看看最終效果：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
第二步，給進(jìn)度條增加文字顯示
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
他的原理就是采用 相對定位和絕對定位，然后通過背景不同來控制進(jìn)度。 接下來我們看第二種方式制作進(jìn)度條。
第三步，制作進(jìn)度條的第二種方式---直接使用圖片+背景圖片
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這種方式的原理就是 利用 一張img圖片，然后給img圖片又設(shè)置背景圖，通過背景圖的background position 屬性 來顯示不同的部分。
當(dāng)然這種方式 對圖片有點要求 。你仔細(xì)一點就會發(fā)現(xiàn)，寬度是img的2倍。
另外圖片必須是gif透明的，也就是說空心的。呵呵?？床坏竭M(jìn)度條。例子中background-position是用的px值，實際可以采用 % 來控制 更精確， 比如: background-position:80% 50%;等。
總的來說，這應(yīng)該算一個技巧，在實際項目中，也是能使用的。
第四步，應(yīng)用
最后我們看一個簡單的應(yīng)用：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
通過animate來控制圖片的background-position來達(dá)到進(jìn)度條效果。
當(dāng)然你也可以使用第一種方式做，第一種方式需要改變的是進(jìn)度條的 width 屬性。
文件打包下載
第一步，基本
構(gòu)建基本的代碼，看效果演示：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
第二步，給進(jìn)度條增加文字顯示
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
他的原理就是采用 相對定位和絕對定位，然后通過背景不同來控制進(jìn)度。 接下來我們看第二種方式制作進(jìn)度條。
第三步，制作進(jìn)度條的第二種方式---直接使用圖片+背景圖片
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這種方式的原理就是 利用 一張img圖片，然后給img圖片又設(shè)置背景圖，通過背景圖的background position 屬性 來顯示不同的部分。
當(dāng)然這種方式 對圖片有點要求 。你仔細(xì)一點就會發(fā)現(xiàn)，寬度是img的2倍。
另外圖片必須是gif透明的，也就是說空心的。呵呵?？床坏竭M(jìn)度條。例子中background-position是用的px值，實際可以采用 % 來控制 更精確， 比如: background-position:80% 50%;等。
總的來說，這應(yīng)該算一個技巧，在實際項目中，也是能使用的。
第四步，應(yīng)用
最后我們看一個簡單的應(yīng)用：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
通過animate來控制圖片的background-position來達(dá)到進(jìn)度條效果。
當(dāng)然你也可以使用第一種方式做，第一種方式需要改變的是進(jìn)度條的 width 屬性。
文件打包下載
您可能感興趣的文章:
- JavaScript?canvas繪制動態(tài)圓環(huán)進(jìn)度條
- JavaScript canvas繪制圓形加載進(jìn)度條
- 詳解JavaScript+Canvas繪制環(huán)形進(jìn)度條
- JavaScript實現(xiàn)可動的canvas環(huán)形進(jìn)度條
- js+HTML5 canvas 實現(xiàn)簡單的加載條(進(jìn)度條)功能示例
- 環(huán)形加載進(jìn)度條封裝（Vue插件版和原生js版）
- js實現(xiàn)增加數(shù)字顯示的環(huán)形進(jìn)度條效果
- JS實現(xiàn)環(huán)形進(jìn)度條（從0到100%）效果
- js實現(xiàn)進(jìn)度條的方法
- JavaScript canvas實現(xiàn)環(huán)形漸變進(jìn)度條
相關(guān)文章
這篇文章主要介紹了js對象合并的4種方式與數(shù)組合并的4種方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
jQuery $.data()方法使用注意細(xì)節(jié)
前段時間同事在群里對jQuery里的.data()方法接下來介紹jQuery $.data()方法使用注意細(xì)節(jié),需要了解的朋友可以參考下2012-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)隨機(jī)驗證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
Ajax+FormData+javascript實現(xiàn)無刷新表單信息提交
在前端開發(fā)中ajax，formdata和js實現(xiàn)無刷新表單信息提交非常棒，接下來通過本文給大家介紹Ajax+FormData+javascript實現(xiàn)無刷新表單信息提交的相關(guān)資料,需要的朋友可以參考下2016-10-10
如何遍歷對象的屬性?...2006-09-09
js實現(xiàn)完美兼容各大瀏覽器的人民幣大小寫相互轉(zhuǎn)換
在基于網(wǎng)頁的打印輸出或報表中，經(jīng)常會牽扯到金額的大寫，每次都打上去很麻煩，所以想法用一個JavaScript客戶端腳本來實現(xiàn)自動轉(zhuǎn)換，只需在需要顯示大寫金額的時候調(diào)用該JS函數(shù)，下面我們就來匯總下吧2015-10-10
這篇文章主要介紹了原生JS實現(xiàn)簡單的倒計時功能,涉及javascript基于定時器的日期時間運算與頁面元素屬性動態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
在web開發(fā)中，經(jīng)常需要開發(fā)“下載”這一模塊,下面使用java、javascript實現(xiàn)附件下載,需要的朋友可以參考下2014-08-08
這篇文章主要介紹了微信小程序如何獲取用戶頭像和昵稱，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
mpvue微信小程序的接口請求fly全局?jǐn)r截代碼實例
這篇文章主要介紹了mpvue微信小程序的接口請求fly全局?jǐn)r截代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11