前些天我们学生在线首页改版，要做一个工具栏，由于版面的限制，原先策划的很多工具只好安排在一个小区域里面，具体效果如下：
当然，这样的效果，用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代码如下：
复制代码 代码如下:
<div>
<div>
<div>
<ul>
<li>
<a href="#" target="_blank">校车表</a>
</li>
<li>
<a href="https://online.cumt.edu.cn/dzhbl/" target="_blank">电子海报</a>
</li>
<li>
<a href="https://lib.cumt.edu.cn/" target="_blank">图书馆</a>
</li>
</ul>
<ul>
<li>
<a href="https://stu.cumt.edu.cn/xgxt" target="_blank">学生工作系统</a>
</li>
<li>
<a href="https://jwchu.cumt.edu.cn/" target="_blank">教务系统</a>
</li>
<li>
<a href="https://service.js.vnet.cn/" target="_blank">网卡查询</a>
</li>
</ul>
<ul>
<li>
<a href="https://219.219.35.66/index.php" target="_blank">自主学习</a>
</li>
<li>
<a href="#" target="_blank">新生入口</a>
</li>
<li>
<a href="#" target="_blank">焦点视频</a>
</li>
</ul>
<ul>
<li>
<a href="https://219.219.35.66/index.php" target="_blank">自主学习</a>
</li>
<li>
<a href="#" target="_blank">新生入口</a>
</li>
<li>
<a href="#" target="_blank">焦点视频</a>
</li>
</ul>
<ul>
<li>
<a href="https://219.219.35.66/index.php" target="_blank">自主学习</a>
</li>
<li>
<a href="#" target="_blank">新生入口</a>
</li>
<li>
<a href="#" target="_blank">焦点视频</a>
</li>
</ul>
</div>
</div>
<div>
<a href="#"> </a>
<div>
<div></div>
</div>
<a href="#"> </a>
</div>
<div></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库。
我决定为它建立一个对象，大致成员变量如下：
复制代码 代码如下: