程序说明

首先需要一个容器，滑动范围就在这个容器里面，还有是容器里面的绝对定位的滑块，基本就是这两部分。
滑块拖放的部分请参考拖放效果，这里我把拖放程序扩展了一个设置滑块位置的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);

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

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));

这个很简单，懂点数学应该都明白了。

出处：蓝色理想
责任编辑：bluehearts

上一页 仿Apple滑动条(拖动)产品展示效果 [1] 下一页 仿Apple滑动条(拖动)产品展示效果 [3]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。