如何實現jQuery進度條效果

透過jQMeter.js外掛可以簡單的實作jQuery進度條效果，並且可以自訂它的樣式

##【推薦課程：jQuery教學】

實作jQuery進度條效果需要外部引入一個jQuery插件jQMeter.js.它是一款簡單實用的輕量級進度條插件，透過它我們可以輕鬆放入實現帶動畫效果的水平或垂直進度條

進度條實現過程：

（1）外部引入jqmeter.js檔案

下載網址：

http://www.gerardolarios.com/plugins-and-tools/jqmeter/

<script src="jqmeter.min.js"></script>
<script src="./jquery/jquery-2.2.4.js"></script>

（2）在html中建立一個div元素

<div id="jqmeter-container"></div>

（3）完整程式碼

 $(function(){
       	$("#jqmeter-container").jQMeter({
       		goal:'1000',
       		raised:'600',
       		width:'450px',
       		height:'50px',
       		animationSpeed:2000,
       		counterSpeed:3000,
       		bgColor:'#BA3AB5',
       	});
       })

效果圖如下：

jqmeter. js檔案中的參數

參數#類型預設值#描述goalstring#無預設值，必填參數進度列的總長度。可設定為字串，如"$9000"，或整數，如:"9000"raisedstring無預設值，必填參數進度條的當前進度。可以設定為字串，如"$5000"，或整數，如:"5000"widthstring#100%-水平寬度。 （在水平進度條中必須設定）設定進度條的水平寬度。可以設定為百分比或像素值heightstring50px。 （在垂直進度條中必須設定）設定進度條的垂直高度。可以設定為百分比或像素值bgColorstring#444進度條的背景顏色。支援hex、rgba和顏色關鍵字。 barColorstring##bfd255進度條的顏色。支援hex、rgba和顏色關鍵字。 orientationstringhorizo​​ntal進度條的方向，可設定為： 'horizo​​ntal' 或 'vertical'。如果設定為垂直進度條，則該參數必須設定。 displayTotalbooleantrue是否顯示進度條完成的百分比數。 animationSpeedinteger#2000進度條動畫時間，單位毫秒#counterSpeedinteger2000進度條計數的時間，單位毫秒

##

以上是如何實現jQuery進度條效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！