jquery2014-08-05 00:34:28 22406
利用CSS3和Jq打造的进度条和滚动条插件,使用方面,简单。

滑动条实现:
var ScrollBar = {
value: 20,
maxValue: 100,
step: 1,
currentX: 0,
Initialize: function() {
if (this.value > this.maxValue) {
alert("给定当前值大于了最大值");
return;
}
this.GetValue();
$("#scroll_Track").css("width", this.currentX 2 "px");
$("#scroll_Thumb").css("margin-left", this.currentX "px");
this.Value();
$("#scrollBarTxt").html(ScrollBar.value "/" ScrollBar.maxValue);
},
Value: function() {
var valite = false;
var currentValue;
$("#scroll_Thumb").mousedown(function() {
valite = true;
$(document.body).mousemove(function(event) {
if (valite == false) return;
var changeX = event.clientX - ScrollBar.currentX;
currentValue = changeX - ScrollBar.currentX;
$("#scroll_Thumb").css("margin-left", currentValue "px");
$("#scroll_Track").css("width", currentValue 2 "px");
if ((currentValue 25) >= $("#scrollBar").width()) {
$("#scroll_Thumb").css("margin-left", $("#scrollBar").width() - 25 "px");
$("#scroll_Track").css("width", $("#scrollBar").width() 2 "px");
ScrollBar.value = ScrollBar.maxValue;
} else if (currentValue = ScrollBar.maxValue) ScrollBar.value = ScrollBar.maxValue;
if (ScrollBar.value <= 0) ScrollBar.value = 0;
$("#scrollBarTxt").html(ScrollBar.value "/" ScrollBar.maxValue);
});
},
GetValue: function() {
this.currentX = $("#scrollBar").width() * (this.value / this.maxValue);
}
}滑动条使用方法:
//设置最大值 ScrollBar.maxValue=100; //初始化 ScrollBar.Initialize();
进度条实现:
var ProgressBar = {
maxValue: 100,
value: 20,
SetValue: function(aValue) {
this.value=aValue;
if (this.value >= this.maxValue) this.value = this.maxValue;
if (this.value <= 0) this.value = 0;
var mWidth=this.value/this.maxValue*$("#progressBar").width() "px";
$("#progressBar_Track").css("width",mWidth);
$("#progressBarTxt").html(this.value "/" this.maxValue);
}
}进度条使用方法:
//设置最大值 ProgressBar.maxValue=100; //设置当前刻度 ProgressBar.SetValue(index)
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:Jquery精美进度条和滑动条插件,CSS精美进度条和滑动条插件
文章固定链接:https://www.pengyaou.com/legendsz/front/codejq/Njc=.html
上一篇 ASP.NET与Flex图片上传
下一篇 Jq自适应瀑布流