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