这个滑动条（拖动条）效果，一开始是参考了BlueDestiny的slider和Apple产品展示的样式，做了程序的原型。
在做了拖放效果之后，我想应该可以做一个更好的了，所以重做一遍，完善和扩展了一些功能。
碍于时间没有做得很强大，都是一些基本功能，希望各位多提意见！

完整实例下载

欢迎来我的blog交流

效果预览（代码太多只能贴个图了）

预览效果1：
这个是仿Apple滑动条产品展示效果。
除了原来的效果（包括点击缓动滑移、拖动滑移），我还加入了本程序特有的滚轮和键盘控制，滑动条两端鼠标放上去会自动滑动，滑动到两边还会自动换一个表示停止的图案。


?

预览效果3：
这里主要是滑动条关于值方面的应用，可以应用在度量计算等方面。


程序支持两个方向的滑动，如果每次都判断一下再分别设置参数会很麻烦，
所以程序中每次滑动都计算两个方向的位置参数，并把参数直接交给_drag来处理。
由于_drag在实例化时已经做了范围限制和方向锁定，已经带了位置参数修正，所以可以直接交给它处理。
这样虽然效率差点，但就能大大降低复杂度，我想还是值得的。

【自动滑移】

运行Run自动滑移程序后，就会自动滑移，参数可以设置滑移的方向（true为右/下，false为左/上）。
步长是根据百分比来设置的
var percent = this.GetPercent() + (bIncrease ? 1 : -1) * this.RunStep / 100;
this.SetPos((this.Container.clientWidth - this.Bar.offsetWidth) * percent, (this.Container.clientHeight - this.Bar.offsetHeight) * percent);

然后通过位置属性判断是否到了极限值，不是的话就用一个定时器继续滑动：
if(!(bIncrease ? this._IsMax : this._IsMin)){
? ? ? ?this._timer = setTimeout(Bind(this, this.Run, bIncrease), this.RunTime);
}

【缓动滑移】

除了SetPos还有一个EasePos缓动滑移程序可以设置滑块位置。
如果Ease属性是false时，EasePos跟SetPos一样直接设置位置，为true时就会缓动（减速）设置位置。
其中缓动的效果请参考图片切换展示效果(啊) ，程序中如果目标值超过极限值时不能直接判断是否到达目标值，不过可以用_IsMid属性（参考位置判断部分）来判断没有到极限值。

ps：程序只在鼠标点击控制和设置百分比位置中使用了EasePos，其它情况比较适合用SetPos。

【百分比和值】

这个是基本功能了，先看看GetPercent获取百分比程序，这个百分比就是滑块左边距离跟滑动区域的比例：
return this._horizontal ? this.Bar.offsetLeft / (this.Container.clientWidth - this.Bar.offsetWidth)
? ? ? ?? ? ? ?: this.Bar.offsetTop / (this.Container.clientHeight - this.Bar.offsetHeight)
注意滑动区域是容器的clientWidth减去滑块的offsetWidth（关于这两个属性详细请看这里）。
由于返回的是很长的小数，如果要显示的话要处理一下。

对应的有SetPercent设置百分比位置程序，就是根据百分比参数设置滑块的位置：
this.EasePos((this.Container.clientWidth - this.Bar.offsetWidth) * value, (this.Container.clientHeight - this.Bar.offsetHeight) * value);

滑动条更多的应用是在于值的运用。程序中属性MinValue和MaxValue分别设置最小值和最大值。
ps：虽然说是最大值，但不一定就比较大的，不过这样写起来比较方便。
当设置了这两个属性（值）就能GetValue获取当前值了：
return this.MinValue + this.GetPercent() * (this.MaxValue - this.MinValue);

对应的SetValue设置值位置程序：
this.SetPercent((value- this.MinValue)/(this.MaxValue - this.MinValue));
这个很简单，懂点数学应该都明白了。

【位置状态】

程序中有位置程序onMin（最小值时）、onMax（最大值时）和onMid（中间值时）分别在各自位置时执行。
ps：onMid指的是除最小值最大值外的中间部分，不是中心值。
程序是在Move滑动程序中通过百分比来判断当前位置的（0时为最小值，1时为最大值，其他为中间值）。
由于Move程序并不会因为到了极限值就停止，如果仅仅根据百分比来判断那么到了极限值，值虽然不变但程序就会一直被触发。
而我需要的是当值不变的时候，对应位置程序仅仅触发一次。根据需求就衍生出三个位置状态属性_IsMin（最小值状态）、_IsMax（最大值状态）和_IsMid（中间值状态）。
用这几个状态属性和百分比就能实现需要的效果了：
var percent = this.GetPercent();
//最小值判断
if(percent > 0){
? ? ? ?this._IsMin = false;
}else{
? ? ? ?if(!this._IsMin){ this.onMin(); this._IsMin = true; }
}
//最大值判断
if(percent < 1){
? ? ? ?this._IsMax = false;
}else{
? ? ? ?if(!this._IsMax){ this.onMax(); this._IsMax = true; }
}
//中间值判断
if(percent > 0 && percent < 1){
? ? ? ?if(!this._IsMid){ this.onMid(); this._IsMid = true; }
}else{
? ? ? ?this._IsMid = false;
}

这三个位置状态属性在其他程序中也用来判断是否到了极限值。

【鼠标拖动控制】

鼠标拖动控制，就是通过拖动滑块来设置定位。
这个就跟滚动条意思差不多，主要是通过_drag本身的拖放效果来实现的（详细看这里拖放效果）。

【鼠标点击控制】

鼠标点击控制，就是当点击容器的时候能定位到点击的位置。
一般来说只要把ClickCtrl鼠标点击控制程序绑定容器的click事件中就可以了。
但这里有个问题，滑块的点击（拖动控制）跟容器的点击会发生冲突，具体表现是拖放结束后就“顺便”触发了容器的click。
这个本来在滑块的点击事件中取消冒泡就可以：
addEventHandler(this.Bar, "click", BindAsEventListener(this, function(e){ e.stopPropagation(); }));

但ie的click机制有点问题，测试下面的点击：
<div style="width:100px; height:100px; background-color:#CCC;" onclick="alert(1)" >
<div style=" height:50px; background-color:#C11;" onclick="event.stopPropagation?event.stopPropagation()</div>
里面的div取消冒泡，点击它不会触发外面div的onclick，但如果在里面的div点，然拖动到外面的div放，就会触发了，而ff是不会的。
ps：从外面拖到里面也是一样的情况。
经过测试，我觉得是因为ie认为点击的点和放只要是发生在同一个元素的内部（包