如何實現jQuery進度條效果-js教程-PHP中文網

如何實現jQuery進度條效果

清浅

發布： 2019-01-11 16:38:32

原創

5018 人瀏覽過

透過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:&#39;1000&#39;,
       		raised:&#39;600&#39;,
       		width:&#39;450px&#39;,
       		height:&#39;50px&#39;,
       		animationSpeed:2000,
       		counterSpeed:3000,
       		bgColor:&#39;#BA3AB5&#39;,
       	});
       })

登入後複製

效果圖如下：

如何實現jQuery進度條效果

jqmeter. js檔案中的參數

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