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

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

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

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

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

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

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

一下代码简单演示，缺少图片自行添加。

<html> <head> <title>站长教学网 eduyo.com</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <style type="text/css"> *{font-size:12px;} /***大框***/ #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; } </style> <script src="/uploads/2012/04/1135421040-0.jpg"></script> <script> $(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); }) </script> <body> <div id="smallTools" class="clearfix"> <div class="toolBox"> <div class="innerToolBox"> <ul> <li class="tool1"> <a href="#" _fcksavedurl="#" target="_blank">校车表</a> </li> <li class="tool2"> <a href="http://online.cumt.edu.cn/dzhbl/" _fcksavedurl="http://online.cumt.edu.cn/dzhbl/" target="_blank">电子海报</a> </li> <li class="tool3"> <a href="http://lib.cumt.edu.cn/" _fcksavedurl="http://lib.cumt.edu.cn/" target="_blank">图书馆</a> </li> </ul> <ul> <li class="tool4"> <a href="http://stu.cumt.edu.cn/xgxt" _fcksavedurl="http://stu.cumt.edu.cn/xgxt" target="_blank">学生工作系统</a> </li> <li class="tool5"> <a href="http://jwchu.cumt.edu.cn/" _fcksavedurl="http://jwchu.cumt.edu.cn/" target="_blank">教务系统</a> </li> <li class="tool6"> <a href="http://service.js.vnet.cn/" _fcksavedurl="http://service.js.vnet.cn/" target="_blank">网卡查询</a> </li> </ul> <ul> <li class="tool7"> <a href="http://219.219.35.66/index.php" _fcksavedurl="http://219.219.35.66/index.php" target="_blank">自主学习</a> </li> <li class="tool8"> <a href="#" _fcksavedurl="#" target="_blank">新生入口</a> </li> <li class="tool9"> <a href="#" _fcksavedurl="#" target="_blank">焦点视频</a> </li> </ul> <ul> <li class="tool7"> <a href="http://219.219.35.66/index.php" _fcksavedurl="http://219.219.35.66/index.php" target="_blank">自主学习</a> </li> <li class="tool8"> <a href="#" _fcksavedurl="#" target="_blank">新生入口</a> </li> <li class="tool9"> <a href="#" _fcksavedurl="#" target="_blank">焦点视频</a> </li> </ul> <ul> <li class="tool7"> <a href="http://219.219.35.66/index.php" _fcksavedurl="http://219.219.35.66/index.php" target="_blank">自主学习</a> </li> <li class="tool8"> <a href="#" _fcksavedurl="#" target="_blank">新生入口</a> </li> <li class="tool9"> <a href="#" _fcksavedurl="#" target="_blank">焦点视频</a> </li> </ul> </div> </div> <div class="slideBar"> <a href="#" _fcksavedurl="#" class="upBtn"> </a> <div class="barBox"> <div class="innerBar"></div> </div> <a href="#" _fcksavedurl="#" class="downBtn"> </a> </div> <div class="clear"></div> </div> </body> </html>
[站长教学网提示：Ctrl+A全选/可修改后代码再运行！]

(责任编辑：ken)

搜索

热门标签:

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