用jquery实现自定义风格的滑动条实现代码

前些天我们学生在线首页改版，要做一个工具栏，由于版面的限制，原先策划的很多工具只好安排在一个小区域里面，具体效果如下：

当然，这样的效果，用html自带的控件也可以实现。不过自定义的话就可以自己设置滑动条的样式啦，比如说设为红色、蓝色等，按钮形状也可以自己做啦。

需要实现的效果是，这些工具一次最多在可见区域显示9个（这里假设工具项总数多于9个，不满9个的话，将来也很有可能扩展到9个），点击上下的按钮即可将可见区域内的工具区域上下移动。

但是这样做好后，运营人员给我提意见了：要是移动滑动条就可以实现工具栏上下滑动，那用户体验会更好，不过说的简单，做起来就有点麻烦了。

首先从头开始讲解吧。我的构思如下：

1. 整个区域分为两个，一个是工具区域（class=” toolBox”），一个是滑动条区域（class="slideBar"）。
2. 工具区域（class=” toolBox”）设为相对定位，内部有一个大长条（class="innerToolBox"），存放所有的工具，一行三个工具，超出部分不可见（这很关键哦），并且相对外部工具区域（class=” toolBox”）是绝对定位的，刚开始时，top=0，这样每次滑动只需改变其top值即可。
3. 右边的滑动条区域（class="slideBar"）有三个东西：向上按钮（class="upBtn"）、向下按钮（class="downBtn"）、滑动条框（class="barBox"）。滑动条框（class="barBox"）仅仅是存放滑动条的“盒子”，里面有一个滑动条（class=” innerBar”）。和工具栏类似，滑动条（class=” innerBar”）相对滑动条框（class="barBox"）是绝对定位的，只需改变滑动条（class=” innerBar”）的top值即可实现滑动。并且是和左边的工具条是同步滑动的。那么滑动条的高度是固定的吗，当然不是，它的高度得由左边工具的行数决定。这就需要由js来实现了（这个后面会提到）。

html代码如下：

<div id="smallTools" class="clearfix"> 
<div class="toolBox"> 
<div class="innerToolBox"> 
<ul> 
<li class="tool1"> 
<a href="#" target="_blank">校车表</a> 
</li> 
<li class="tool2"> 
<a href="http://online.cumt.edu.cn/dzhbl/" target="_blank">电子海报</a> 
</li> 
<li class="tool3"> 
<a href="http://lib.cumt.edu.cn/" target="_blank">图书馆</a> 
</li> 
</ul> 
<ul> 
<li class="tool4"> 
<a href="http://stu.cumt.edu.cn/xgxt" target="_blank">学生工作系统</a> 
</li> 
<li class="tool5"> 
<a href="http://jwchu.cumt.edu.cn/" target="_blank">教务系统</a> 
</li> 
<li class="tool6"> 
<a href="http://service.js.vnet.cn/" target="_blank">网卡查询</a> 
</li> 
</ul> 
<ul> 
<li class="tool7"> 
<a href="http://219.219.35.66/index.php" target="_blank">自主学习</a> 
</li> 
<li class="tool8"> 
<a href="#" target="_blank">新生入口</a> 
</li> 
<li class="tool9"> 
<a href="#" target="_blank">焦点视频</a> 
</li> 
</ul> 
<ul> 
<li class="tool7"> 
<a href="http://219.219.35.66/index.php" target="_blank">自主学习</a> 
</li> 
<li class="tool8"> 
<a href="#" target="_blank">新生入口</a> 
</li> 
<li class="tool9"> 
<a href="#" target="_blank">焦点视频</a> 
</li> 
</ul> 
<ul> 
<li class="tool7"> 
<a href="http://219.219.35.66/index.php" target="_blank">自主学习</a> 
</li> 
<li class="tool8"> 
<a href="#" target="_blank">新生入口</a> 
</li> 
<li class="tool9"> 
<a href="#" target="_blank">焦点视频</a> 
</li> 
</ul> 
</div> 
</div> 
<div class="slideBar"> 
<a href="#" class="upBtn"> </a> 
<div class="barBox"> 
<div class="innerBar"></div> 
</div> 
<a href="#" class="downBtn"> </a> 
</div> 
<div class="clear"></div> 
</div>

css代码如下：

/***大框***/ 
#smallTools 
{ 
background:url(../images10/smallBarBg.gif) repeat-x left bottom; 
position:relative; 
height:227px; 
overflow:hidden; 
} 
/***左右两边的布局***/ 
#smallTools .toolBox /***左边的工具框区域***/ 
{ 
height:207px; 
margin-top:10px; 
float:left; 
width:237px; 
margin-left:10px; 
overflow:hidden; 
position:relative; 
} 
#smallTools .slideBar /***右边的滑动条区域***/ 
{ 
height:227px; 
float:right; 
width:11px; 
} 
/***左框内元素的具体样式***/ 
.innerToolBox 
{ 
position:absolute; 
left:0px; 
top:0px; 
} 
#smallTools ul 
{ 
height:69px; 
} 
#smallTools ul li 
{ 
float:left; 
width:79px; 
height:69px; 
text-align:center; 
} 
#smallTools ul li a 
{ 
display:block; 
width:79px; 
height:22px; 
padding-top:47px; 
color:#000; 
} 
/***以下是给各工具项设置背景***/ 
#smallTools ul li.tool1 
{ 
background:url(../images/tool1.gif) no-repeat center 7px 
} 
#smallTools ul li.tool2 
{ 
background:url(../images/tool2.gif) no-repeat center 7px 
} 
#smallTools ul li.tool3 
{ 
background:url(../images/tool3.gif) no-repeat center 7px 
} 
#smallTools ul li.tool4 
{ 
background:url(../images/tool4.gif) no-repeat center 7px 
} 
#smallTools ul li.tool5 
{ 
background:url(../images/tool5.gif) no-repeat center 7px 
} 
#smallTools ul li.tool6 
{ 
background:url(../images/tool6.gif) no-repeat center 7px 
} 
#smallTools ul li.tool7 
{ 
background:url(../images/tool7.gif) no-repeat center 7px 
} 
#smallTools ul li.tool8 
{ 
background:url(../images/tool8.gif) no-repeat center 7px 
} 
#smallTools ul li.tool9 
{ 
background:url(../images/tool9.gif) no-repeat center 7px 
} 
/***右边滑动条框的具体样式***/ 
.slideBar .upBtn /***向上滑动按钮***/ 
{ 
display:block; 
line-height:0px; 
width:9px; 
height:7px; 
background:url(../images/up_btn.png) no-repeat left top; 
margin-top:2px; 
padding:0px; 
} 
.slideBar .upBtn:hover 
{ 
border:1px solid #000000; 
} 
.slideBar .downBtn /***向下滑动按钮***/ 
{ 
display:block; 
line-height:0px; 
width:9px; 
height:7px; 
background:url(../images/down_btn.png) no-repeat left top; 
margin:0px; 
padding:0px; 
} 
.slideBar .downBtn:hover 
{ 
border:1px solid #000000; 
} 
#smallTools .barBox 
{ 
height:196px; 
margin:4px 0px; 
width:11px; 
position:relative; 
} 
.innerBar 
{ 
position:absolute; 
width:10px; 
background:#a4a4a4; 
cursor:s-resize; 
top:0px; 
}

接下来就是给它添加脚本代码了。为了方便，在这里用的是jQuery库。
我决定为它建立一个对象，大致成员变量如下：

$( function() 
{ 
/***对象方法，进行一些成员变量的赋值 
变量：elem：要被上下移动的工具条区域名（元素名、id和class的组合） 
perHight：每一格一次被移动的长度 
slideN：工具栏中工具的行数 
showN：可见的工具的行数（这里是3） 
speed：一次移动所花的毫秒数 
index：可见区域的第一行的索引 
barElem：滑动条名（元素名、id和class的组合） 
***/ 
function toolBar(elem,perHeight,slideN,showN,speed,index,barElem) 
{……} 
toolBar.prototype= 
{ 
/***滑动条的高度的设置 
高度计算公式：滑动条可设置的最大高度*可见的工具的行数/工具栏中工具的总行数 
***/ 
initBar:function() 
{……}, 
/***工具条滑动的函数，to是要被滑动到的索引，这函数在点上下按钮或移动滑动条的时候会被触发***/ 
slide:function(to) 
{……}, 
/***滑动条滑动的函数，to是要被滑动到的索引，这函数在点上下按钮的时候会被触发，和slide函数同步实现***/ 
barSlide:function(to) 
{……}, 
/***本函数为上下按钮添加点击事件 
upelem：向上按钮的名字（元素名、id和class的组合） 
downelem：向下按钮的名字（元素名、id和class的组合） 
***/ 
clickTab:function(upelem,downelem) 
{……}, 
/***拖动滑动条的函数，拖动后，工具框也进行相应移动。 
elem：需要被移动的元素名（元素名、id和class的组合） 
handle：使相应元素被移动所需要拖动的把柄元素名（元素名、id和class的组合） 
uplev：被拖动元素最高点（这里是0） 
downlev：被拖动元素的最低点（这里是196） 
***/ 
drag:function(elem,handle,uplev,downlev) 
{……} 
} 
/***这里进行对象的实例化，与相关函数的调用***/ 
})

完整的js代码如下：

$(function() 
{ 
function toolBar(elem,perHeight,slideN,showN,speed,index,barElem) 
{ 
this.elem=$(elem); 
this.perHeight=perHeight; 
this.slideN=slideN; 
this.showN=showN; 
this.speed=speed; 
this.index=index; 
this.barElem=barElem; 
} 
toolBar.prototype= 
{ 
initBar:function() 
{ 
var tl=$(this.barElem).parent().height(); 
$(this.barElem).css({'height':tl*this.showN/this.slideN}); 
}, 
slide:function(to) 
{ 
this.elem.animate({'top':-(to*this.perHeight)},this.speed) 
}, 
barSlide:function(to) 
{ 
var tl=$(this.barElem).parent().height(); 
$(this.barElem).animate({'top':tl*to/this.slideN},this.speed) 
}, 
clickTab:function(upelem,downelem) 
{ 
var _this=this; 
$(upelem).bind('click',function() 
{ 
if(_this.index>0) 
{ 
_this.index--; 
_this.slide(_this.index); 
_this.barSlide(_this.index); 
} 
return false; 
}); 
$(downelem).bind('click',function() 
{ 
if(_this.index<_this.slideN-_this.showN) 
{ 
_this.index++; 
_this.slide(_this.index); 
_this.barSlide(_this.index); 
} 
return false; 
}); 
}, 
drag:function(elem,handle,uplev,downlev) 
{ 
var _this=this; 
var tl=$(this.barElem).parent().height(); 
var C=$(elem); 
var dy, moveout; 
var T = $(handle); 
T.bind("selectstart", function() 
{ 
return false; 
}); 
T.mousedown(function(e) 
{ 
//dx = e.clientX - parseInt(C.css("left")); 
e=e?e:window.event; 
dy = e.clientY - parseInt(C.css("top")); 
C.mousemove(move).mouseout(out).css('opacity', 0.8); 
T.mouseup(up); 
}); 
function move(e) 
{ 
e=e?e:window.event; 
moveout = false; 
if((e.clientY - dy)>=uplev&&(e.clientY - dy)<=(downlev-C.height())) 
C.css({"top": e.clientY - dy}); 
} 
function out(e) 
{ 
e=e?e:window.event; 
moveout = true; 
setTimeout(function(){checkout(e);}, 100); 
} 
function up(e) 
{ 
e=e?e:window.event; 
var adaptTop; 
var presTop=parseInt(C.css("top")); 
C.unbind("mousemove", move).unbind("mouseout", out).css('opacity', 1); 
T.unbind("mouseup", up); 
//alert(parseInt(_this.slideN)); 
if(((presTop/(tl/_this.slideN))-parseInt(presTop/(tl/_this.slideN)))>=0.5) 
{ 
_this.index=parseInt(presTop/(tl/_this.slideN))+1; 
} 
else 
{ 
_this.index=parseInt(presTop/(tl/_this.slideN)); 
} 
adaptTop=_this.index*(tl/_this.slideN); 
_this.slide(_this.index); 
C.css({"top":adaptTop}); 
} 
function checkout(e) 
{ 
e=e?e:window.event; 
moveout && up(e); 
} 
} 
} 
var slength=$("#smallTools .innerToolBox ul").length; 
var stBox=new toolBar("#smallTools .innerToolBox",69,slength,3,700,0,"#smallTools .innerBar"); 
stBox.initBar(); 
stBox.clickTab("#smallTools .upBtn","#smallTools .downBtn"); 
stBox.drag("#smallTools .innerBar","#smallTools .innerBar",0,196); 
})

水平有限，如有错误，敬请批评指正。