用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 相关文章推荐
input+select(multiple) 实现下拉框输入值
May 21 Javascript
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
JQuery中getJSON的使用方法
Dec 13 Javascript
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
js实现的折叠导航示例
Nov 29 Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
Vue路由守卫之路由独享守卫
Sep 25 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
基于PHP文件操作的详细诠释
2013/06/21 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
很可爱的输入框
2008/08/03 Javascript
Ext面向对象开发实践(续)
2008/11/18 Javascript
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
js 数组操作代码集锦
2009/04/28 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
JS常用算法实现代码
2016/11/14 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
vue 粒子特效的示例代码
2017/09/19 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
vue路由前进后退动画效果的实现代码
2018/12/10 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
用Python写冒泡排序代码
2016/04/12 Python
Python实现字符串格式化的方法小结
2017/02/20 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
Atom的python插件和常用插件说明
2018/07/08 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
职工趣味运动会方案
2014/02/10 职场文书
文案策划求职信
2014/04/14 职场文书
机电一体化专业求职信
2014/07/22 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
还款承诺书范本
2015/01/20 职场文书
大学生个人学习总结
2015/02/15 职场文书
初中语文教学随笔
2015/08/15 职场文书
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android