jquery2014-08-10 07:57:10 3646
刚写的Jq带数字显示的进度条插件。使用简单方便。大小,颜色,字体等等参数也可以随时设置。
源代码:
var BlackProgress={ ProgressWidth:500, ProgressHeight:20, ProgressParent:null, ProgressValue:0, ProgressMaxValue:100, ProgressStation:null, ProgressTrack:null, ProgressText:"0%", ProgressStationText:null, ProgressTextColor:"#f13742", ProgressTrackBgColor:"#808080", Initialize:function(){ var ProgressBody=$(""); var ProgressMain=$(""); var ProgressBar=$(""); var ProgressStationMain=$(""); BlackProgress.ProgressStationText=$("dfd"); BlackProgress.ProgressStation=$(""); BlackProgress.ProgressTrack=$(""); ProgressBody.css({"background-color":"#efefef","width":BlackProgress.ProgressWidth "px","height":BlackProgress.ProgressHeight "px","margin":"0 auto","-webkit-border-radius": "3px","-moz-border-radius": "3px","border-radius": "3px"}); ProgressBody.attr("id","progressBody"); $(BlackProgress.ProgressParent).append(ProgressBody); //设置ProgressMain ProgressMain.css({"background-color":"#34393e","width":BlackProgress.ProgressWidth "px","height":BlackProgress.ProgressHeight-10 "px","margin":"0 auto","margin-top":"4px","-webkit-border-radius": "2em","-moz-border-radius": "2em","border-radius": "2em"}); ProgressBody.append(ProgressMain); //设置ProgressStationMain ProgressStationMain.attr("id","progressStationMain"); ProgressStationMain.css({"overflow":"hidden","height":(BlackProgress.ProgressHeight-5)*2 "px","width":(BlackProgress.ProgressHeight-5)*2 "px","background-color":"#34393e","position":"absolute","-webkit-border-radius": "50%","-moz-border-radius": "50%","border-radius": "50%","margin-top":-BlackProgress.ProgressHeight 5 (BlackProgress.ProgressHeight-10)/2 "px","margin-left":BlackProgress.ProgressWidth/2-(BlackProgress.ProgressHeight-10) "px"}); ProgressMain.append(ProgressStationMain); //设置ProgressStation BlackProgress.ProgressStation.css({"position":"absolute","height":(BlackProgress.ProgressHeight-5)*2 "px","width":(BlackProgress.ProgressHeight-5)*2 "px","-webkit-border-radius": "50% 0 0 50%","-moz-border-radius": "50% 0 0 50%","border-radius": "50% 0 0 50%","background-color":BlackProgress.ProgressTrackBgColor,"margin-left":-(BlackProgress.ProgressHeight-5)*2 "px"}); ProgressStationMain.append(BlackProgress.ProgressStation); //设置ProgressText BlackProgress.ProgressStationText.css({"font-size":"12px","position":"absolute","left":(BlackProgress.ProgressHeight-5)*2/2-10 "px","top":(BlackProgress.ProgressHeight-5)*2/2-8 "px","z-index":"999","color":BlackProgress.ProgressTextColor}); BlackProgress.ProgressStationText.html(BlackProgress.ProgressText); ProgressStationMain.append(BlackProgress.ProgressStationText); //设置ProgressTrack BlackProgress.ProgressTrack.css({"background-color":BlackProgress.ProgressTrackBgColor,"width":"0px","height":BlackProgress.ProgressHeight-10 "px","-webkit-border-radius": "2em","-moz-border-radius": "2em","border-radius": "2em"}); ProgressMain.append(BlackProgress.ProgressTrack); BlackProgress.Value(BlackProgress.ProgressValue); }, Value:function(a){ if(BlackProgress.ProgressTrack==null||a>=BlackProgress.ProgressMaxValue){ BlackProgress.ProgressTrack.css("width",BlackProgress.ProgressWidth "px"); BlackProgress.ProgressStationText.html("100%"); return; } BlackProgress.ProgressStationText.html(a/BlackProgress.ProgressMaxValue*100 "%"); BlackProgress.ProgressTrack.css("width",a/BlackProgress.ProgressMaxValue*BlackProgress.ProgressWidth "px"); if(a/BlackProgress.ProgressMaxValue*BlackProgress.ProgressWidth>(BlackProgress.ProgressWidth/2-(BlackProgress.ProgressHeight-10))){ if(a/BlackProgress.ProgressMaxValue*BlackProgress.ProgressWidth-BlackProgress.ProgressWidth/2-(BlackProgress.ProgressHeight-10)>=(BlackProgress.ProgressHeight-5)*2-10) { $("#progressStationMain").css("background-color",BlackProgress.ProgressTrackBgColor); BlackProgress.ProgressStation.css("display","none"); } else BlackProgress.ProgressStation.css("margin-left",-(BlackProgress.ProgressHeight-5)*2 a/BlackProgress.ProgressMaxValue*BlackProgress.ProgressWidth-BlackProgress.ProgressWidth/2 "px"); } } }
使用:
BlackProgress.ProgressParent=$(document.body); BlackProgress.Initialize(); var index=0; var mProgressTimer=setInterval(function(){ index ; BlackProgress.Value(index); },50);
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:Jquery进度条插件,Jquery进度条,Jq带文字的进度条
文章固定链接:https://www.pengyaou.com/legendsz/front/codejq/MTA=.html
下一篇 CSS3按钮渐变效果