利用CSS3和Jq打造的进度条和滚动条插件，使用方面，简单。
滑动条实现：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
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 <= 0) {
$("#scroll_Thumb").css("margin-left", "0px");
$("#scroll_Track").css("width", "0px");
} else {
ScrollBar.value = Math.round(100 * (currentValue / $("#scrollBar").width()));
}
$("#scrollBarTxt").html(ScrollBar.value "/" ScrollBar.maxValue);
});
});
$(document.body).mouseup(function() {
ScrollBar.value = Math.round(100 * (currentValue / $("#scrollBar").width()));
valite = false;
if (ScrollBar.value >= 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);
}
}
|
滑动条使用方法：
|
1
2
3
4
|
//设置最大值
ScrollBar.maxValue=100;
//初始化
ScrollBar.Initialize();
|
进度条实现：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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);
}
}
|
进度条使用方法：
|
1
2
3
4
|
//设置最大值
ProgressBar.maxValue=100;
//设置当前刻度
ProgressBar.SetValue(index)
|
