用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);
})

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


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3