jquery2014-08-10 07:57:10 3946
刚写的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按钮渐变效果