實現(xiàn)jQuery進度條效果的方法-創(chuàng)新互聯(lián)

這篇文章主要介紹實現(xiàn)jQuery進度條效果的方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)專注于貴陽網(wǎng)站建設服務及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供貴陽營銷型網(wǎng)站建設，貴陽網(wǎng)站制作、貴陽網(wǎng)頁設計、貴陽網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)服務，打造貴陽網(wǎng)絡公司原創(chuàng)品牌,更為您提供貴陽網(wǎng)站排名全網(wǎng)營銷落地服務。

通過jQMeter.js插件可以簡單的實現(xiàn)jQuery進度條效果，并且可以自定義它的樣式

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

進度條實現(xiàn)過程：

（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中創(chuàng)建一個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文件中的參數(shù)

參數(shù)	類型	默認值	描述
goal	string	無默認值，必填參數(shù)	進度條的總長度?？梢栽O置為字符串，如"$9000"，或整數(shù)，如:"9000"
raised	string	無默認值，必填參數(shù)	進度條的當前進度。可以設置為字符串，如"$5000"，或整數(shù)，如:"5000"
width	string	100%-水平寬度。（在水平進度條中必須設置）	設置進度條的水平寬度?？梢栽O置為百分比或像素值
height	string	50px。（在垂直進度條中必須設置）	設置進度條的垂直高度?？梢栽O置為百分比或像素值
bgColor	string	#444	進度條的背景顏色。支持hex、rgba和顏色關鍵字。
barColor	string	#bfd255	進度條的顏色。支持hex、rgba和顏色關鍵字。
orientation	string	horizontal	進度條的方向，可設置為： 'horizontal' 或 'vertical'。如果設置為垂直進度條，該參數(shù)必須設置。
displayTotal	boolean	true	是否顯示進度條完成的百分比數(shù)。
animationSpeed	integer	2000	進度條動畫時間，單位毫秒
counterSpeed	integer	2000	進度條計數(shù)的時間，單位毫秒

以上是實現(xiàn)jQuery進度條效果的方法的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

網(wǎng)站名稱：實現(xiàn)jQuery進度條效果的方法-創(chuàng)新互聯(lián)
URL地址：http://bm7419.com/article4/dscoie.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、云服務器、品牌網(wǎng)站設計、軟件開發(fā)、靜態(tài)網(wǎng)站、網(wǎng)站導航

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)