思洋互动网站建设学前班

使用说明

首先实例化一个滑动条对象，需要两个参数，分别是滑动容器和滑块（滑块要在容器里面哦）： 

1. var sld = new Slider("idSlider", "idBar")  

有以下这些可选参数和属性： 

程序代码

1. //滑动条程序  
2. var Slider = Class.create();  
3. Slider.prototype = {  
4.   //容器对象，滑块  
5.   initialize: function(container, bar, options) {  
6.     this.Bar = $(bar);  
7.     this.Container = $(container);  
8.     this._timer = null;//自动滑移的定时器  
9.     this._ondrag = false;//解决ie的click问题  
10.     //是否最小值、最大值、中间值  
11.     this._IsMin = this._IsMax = this._IsMid = false;  
12.     //实例化一个拖放对象，并限定范围  
13.     this._drag = new Drag(this.Bar, { Limit: true, mxContainer: this.Container,  
14.         onStart: Bind(this, this.DragStart), onStop: Bind(this, this.DragStop), onMove: Bind(this, this.Move)  
15.     });  
16.       
17.     this.SetOptions(options);  
18.       
19.     this.WheelSpeed = Math.max(0, this.options.WheelSpeed);  
20.     this.KeySpeed = Math.max(0, this.options.KeySpeed);  
21.       
22.     this.MinValue = this.options.MinValue;  
23.     this.MaxValue = this.options.MaxValue;  
24.       
25.     this.RunTime = Math.max(1, this.options.RunTime);  
26.     this.RunStep = Math.max(1, this.options.RunStep);  
27.       
28.     this.Ease = !!this.options.Ease;  
29.     this.EaseStep = Math.max(1, this.options.EaseStep);  
30.       
31.     this.onMin = this.options.onMin;  
32.     this.onMax = this.options.onMax;  
33.     this.onMid = this.options.onMid;  
34.       
35.     this.onDragStart = this.options.onDragStart;  
36.     this.onDragStop = this.options.onDragStop;  
37.       
38.     this.onMove = this.options.onMove;  
39.       
40.     this._horizontal = !!this.options.Horizontal;//一般不允许修改  
41.       
42.     //锁定拖放方向  
43.     this._drag[this._horizontal ? "LockY" : "LockX"] = true;  
44.       
45.     //点击控制  
46.     addEventHandler(this.Container, "click", BindAsEventListener(this, function(e){ this._ondrag || this.ClickCtrl(e);}));  
47.     //取消冒泡，防止跟Container的click冲突  
48.     addEventHandler(this.Bar, "click", BindAsEventListener(this, function(e){ e.stopPropagation(); }));  
49.       
50.     //设置鼠标滚轮控制  
51.     this.WheelBind(this.Container);  
52.     //设置方向键控制  
53.     this.KeyBind(this.Container);  
54.     //修正获取焦点  
55.     var oFocus = isIE ? (this.KeyBind(this.Bar), this.Bar) : this.Container;  
56.     addEventHandler(this.Bar, "mousedown", function(){ oFocus.focus(); });  
57.     //ie鼠标捕获和ff的取消默认动作都不能获得焦点，所以要手动获取  
58.     //如果ie把focus设置到Container，那么在出现滚动条时ie的focus可能会导致自动滚屏  
59.   },  
60.   //设置默认属性  
61.   SetOptions: function(options) {  
62.     this.options = {//默认值  
63.         MinValue:    0,//最小值  
64.         MaxValue:    100,//最大值  
65.         WheelSpeed: 5,//鼠标滚轮速度,越大越快(0则取消鼠标滚轮控制)  
66.         KeySpeed:     50,//方向键滚动速度,越大越慢(0则取消方向键控制)  
67.         Horizontal:    true,//是否水平滑动  
68.         RunTime:    20,//自动滑移的延时时间,越大越慢  
69.         RunStep:    2,//自动滑移每次滑动的百分比  
70.         Ease:        false,//是否缓动  
71.         EaseStep:    5,//缓动等级,越大越慢  
72.         onMin:        function(){},//最小值时执行  
73.         onMax:        function(){},//最大值时执行  
74.         onMid:        function(){},//中间值时执行  
75.         onDragStart:function(){},//拖动开始时执行  
76.         onDragStop:    function(){},//拖动结束时执行  
77.         onMove:        function(){}//滑动时执行  
78.     };  
79.     Extend(this.options, options || {});  
80.   },  
81.   //开始拖放滑动  
82.   DragStart: function() {  
83.       this.onDragStart();  
84.     this._ondrag = true;  
85.   },  
86.   //结束拖放滑动  
87.   DragStop: function() {  
88.       this.onDragStop();  
89.     setTimeout(Bind(this, function(){ this._ondrag = false; }), 10);  
90.   },  
91.   //滑动中  
92.   Move: function() {  
93.       this.onMove();  
94.       
95.     var percent = this.GetPercent();  
96.     //最小值判断  
97.     if(percent > 0){  
98.         this._IsMin = false;  
99.     }else{  
100.         if(!this._IsMin){ this.onMin(); this._IsMin = true; }  
101.     }  
102.     //最大值判断  
103.     if(percent < 1){  
104.         this._IsMax = false;  
105.     }else{  
106.         if(!this._IsMax){ this.onMax(); this._IsMax = true; }  
107.     }  
108.     //中间值判断  
109.     if(percent > 0 && percent < 1){  
110.         if(!this._IsMid){ this.onMid(); this._IsMid = true; }  
111.     }else{  
112.         this._IsMid = false;  
113. 标签：网站建设(5654)广州网站设计(5620)广州网站建设(4075)广州网页设计(1868)