思洋互动网站建设学前班

程序说明

首先需要一个容器，滑动范围就在这个容器里面，还有是容器里面的绝对定位的滑块，基本就是这两部分。

滑块拖放的部分请参考拖放效果，这里我把拖放程序扩展了一个设置滑块位置的SetPos方法方便程序使用。
广州网站建设,网站建设,广州网页设计,广州网站设计

【水平和垂直滑动】

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

程序初始化时就根据这个属性锁定拖放的方向：

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

程序支持两个方向的滑动，如果每次都判断一下再分别设置参数会很麻烦，所以程序中每次滑动都计算两个方向的位置参数，并把参数直接交给_drag来处理。 由于_drag在实例化时已经做了范围限制和方向锁定，已经带了位置参数修正，所以可以直接交给它处理。

这样虽然效率差点，但就能大大降低复杂度，我想还是值得的。

【自动滑移】

运行Run自动滑移程序后，就会自动滑移，参数可以设置滑移的方向（true为右/下，false为左/上）。

步长是根据百分比来设置的

1. var percent = this.GetPercent() + (bIncrease ? 1 : -1) * this.RunStep / 100;  
2. this.SetPos((this.Container.clientWidth - this.Bar.offsetWidth) * percent, (this.Container.clientHeight - this.Bar.offsetHeight) * percent);  

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

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

【缓动滑移】

除了SetPos还有一个EasePos缓动滑移程序可以设置滑块位置。

如果Ease属性是false时，EasePos跟SetPos一样直接设置位置，为true时就会缓动（减速）设置位置。

其中缓动的效果请参考图片切换展示效果 ，程序中如果目标值超过极限值时不能直接判断是否到达目标值，不过可以用_IsMid属性（参考位置判断部分）来判断没有到极限值。

注意，因为要跟offset取的值比较，而offset取的值是整数，所以参数必须转换成整数（程序用Math.round处理了），否则如果是小数那就永远都不会相等（死循环）了。

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