用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 相关文章推荐
jQuery 源码分析笔记(4) Ready函数
Jun 02 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
给before和after伪元素设置js效果的方法
Dec 04 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
react以create-react-app为基础创建项目
Mar 14 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 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中time()和mktime()方法的区别
2013/09/28 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
PHP错误处理函数
2016/04/03 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
python数据类型_字符串常用操作(详解)
2017/05/30 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
考博自荐信
2013/10/25 职场文书
数字化校园建设方案
2014/05/03 职场文书
银行进社区活动总结
2014/07/07 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技