JavaScript 滑动条效果

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

效果预览

预览效果1：

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

1. 图片切割 2. 图片切换展示 3. 图片变换效果 4. 无刷新上传 5. 图片滑动展示

预览效果2：

这里是稍微模拟了一下滚动条，当然离真正的滚动条还差很远。
滑动条除了水平还支持垂直方向的滑动，在内容显示部分按上下方向（需要先点击选中一下）或使用鼠标滚轮也能控制滑动。

• 1. JavaScript 图片切割效果
• 2. JavaScript 图片切换展示效果
• 3. JavaScript 图片变换效果(ie only)
• 4. JavaScript 仿LightBox内容显示效果
• 5. 仿163网盘无刷新文件上传系统
• 6. JavaScript 图片滑动展示效果
• 7. JavaScript 自定义多级联动浮动菜单
• 8. JavaScript 渐变效果
• 9. 图片切割系统
• 10. JavaScript 拖放效果
• 11. JavaScript 拖拉缩放效果
• 12. JavaScript 无缝上下左右滚动加定高定宽停顿效果
• 13. JavaScript Table排序
• 14. JavaScript 弹簧效果
• 15. JavaScript blog式日历控件
• 16. JavaScript 日期联动选择器
• 17. JavaScript 自定义多级联动下拉菜单
• 18. JavaScript 滑移效果
• 19. JavaScript 颜色渐变效果

预览效果3：

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

当前值：
当前百分比： %
状态： 未开始
设置最小值： 设置最大值：
移动到：

 
程序说明

首先需要一个容器，滑动范围就在这个容器里面，还有是容器里面的绝对定位的滑块，基本就是这两部分。
滑块拖放的部分请参考拖放效果，这里我把拖放程序扩展了一个设置滑块位置的SetPos方法方便程序使用。

【水平和垂直滑动】

程序支持水平和垂直滑动，设置Horizontal属性为true就是水平滑动（默认），为false就是垂直滑动。
这个属性只能在实例化时设置，初始化之后会就不要修改了。
程序初始化时就根据这个属性锁定拖放的方向：

this ._drag[ this ._horizontal  ?   " LockY "  :  " LockX " ]  =   true ;

程序支持两个方向的滑动，如果每次都判断一下再分别设置参数会很麻烦，
所以程序中每次滑动都计算两个方向的位置参数，并把参数直接交给_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);

然后通过位置属性判断是否到了极限值，不是的话就用一个定时器继续滑动：

Code
if(!(bIncrease ? this._IsMax : this._IsMin)){
    this._timer = setTimeout(Bind(this, this.Run, bIncrease), this.RunTime);
}

 

【缓动滑移】

除了SetPos还有一个EasePos缓动滑移程序可以设置滑块位置。
如果Ease属性是false时，EasePos跟SetPos一样直接设置位置，为true时就会缓动（减速）设置位置。
其中缓动的效果请参考图片切换展示效果 ，程序中如果目标值超过极限值时不能直接判断是否到达目标值，不过可以用_IsMid属性（参考位置判断部分）来判断没有到极限值。
注意，因为要跟offset取的值比较，而offset取的值是整数，所以参数必须转换成整数（程序用Math.round处理了），否则如果是小数那就永远都不会相等（死循环）了。

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（中间值状态）。
用这几个状态属性和百分比就能实现需要的效果了：

Code
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(!