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


Posted in Javascript onApril 26, 2011

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

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

水平有限,如有错误,敬请批评指正。
Javascript 相关文章推荐
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
网页图片延时加载的js代码
Apr 22 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 Javascript
Angular PWA使用的Demo示例
Jan 31 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 Javascript
超轻量级的基于jquery的三级展开列表
Apr 26 #Javascript
jqPlot 基于jquery的画图插件
Apr 26 #Javascript
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 #Javascript
jQuery 版元素拖拽原型代码
Apr 25 #Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 #Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 #Javascript
分享14个很酷的jQuery导航菜单插件
Apr 25 #Javascript
You might like
第四节--构造函数和析构函数
2006/11/16 PHP
php新建文件自动编号的思路与实现
2011/06/27 PHP
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
php根据年月获取季度的方法
2014/03/31 PHP
php无限级分类实现方法分析
2016/10/19 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
jquery 插件学习(二)
2012/08/06 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
在Python中实现贪婪排名算法的教程
2015/04/17 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
Python字符串处理实例详解
2017/05/18 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
公司面试感谢信
2014/02/01 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
志愿者活动总结
2014/04/28 职场文书
学生安全责任书范本
2014/07/24 职场文书
教代会开幕词
2015/01/28 职场文书