jquery2014-08-05 00:34:28 22385
利用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自适应瀑布流