您好,登錄后才能下訂單哦!
這篇文章主要介紹了jquery怎么實(shí)現(xiàn)百分比記分進(jìn)度條,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
jquery是一個(gè)簡潔而快速的JavaScript庫,它具有獨(dú)特的鏈?zhǔn)秸Z法和短小清晰的多功能接口、高效靈活的css選擇器,并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展、擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件,是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫,能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動(dòng)畫,以便快速開發(fā)網(wǎng)站。
jquery實(shí)現(xiàn)百分比記分進(jìn)度條的具體內(nèi)容如下
1.先看效果
2.代碼如下
jquery.lineProgressbar.js代碼如下
(function($){ 'use strict'; $.fn.LineProgressbar = function(options){ var options = $.extend({ percentage : null, ShowProgressCount: true, duration: 1000, // Styling Options fillBackgroundColor: '#3498db', backgroundColor: '#EEEEEE', radius: '0px', height: '10px', width: '100%' },options); return this.each(function(index, el) { // Markup $(el).html('<div class="progressbar"><div class="proggress"></div></div><div class="percentCount"></div>'); var progressFill = $(el).find('.proggress'); var progressBar= $(el).find('.progressbar'); progressFill.css({ backgroundColor : options.fillBackgroundColor, height : options.height, borderRadius: options.radius }); progressBar.css({ width : options.width, backgroundColor : options.backgroundColor, borderRadius: options.radius }); // Progressing progressFill.animate( { width: options.percentage + "%" }, { step: function(x) { if(options.ShowProgressCount){ $(el).find(".percentCount").text("("+Math.round(x) + "分"+")"); } }, duration: options.duration } ); }); } })(jQuery);
jquery.lineProgressbar.css樣式代碼如下
#progressbar1{ display: flex; height: 15px; } .progressbar { width: 50%; margin-top: 5px; position: relative; background: #182746 !important; border-radius: 6px !important; box-shadow: inset 0px 1px 1px rgba(0,0,0,.1); } .proggress{ height: 8px; width: 10px; background: linear-gradient(to right, rgb(13, 93, 176), rgb(32, 177, 223)) !important; border-radius: 6px !important; } .percentCount{ white-space: nowrap; margin-left: 10px; font-size: 14px; }
這樣就可以實(shí)現(xiàn)記分條,百分比的話只需要將分改成%就OK了。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“jquery怎么實(shí)現(xiàn)百分比記分進(jìn)度條”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。