使用jQuery UI制作滑动条效果

作者：66
Hi，大家好，我是CssRain的站长。爱好前端开发的我先后从事过Java开发，JavaScript，CSS开发等，已经工作两年+了。目前就职于亚信中国(Asiainfo)，担任前端开发和创新工作。忠心希望所有的读者在这里都能够有收获和进步，同时也希望大家多多支持CssRain。这是我的最大心愿。Best Regards。

使用jQuery UI制作滑动条效果

前段时间在佐佐的博客上看到这个效果：http://byzuo.com/blog/dragscroll.
当时他是用纯JS写的，中间有点BUG。今天我不去帮它改进了，而是使用jQuery UI来完成这个效果。

效果的最终截图：

 

1.什么是jQuery UI

简单的说jQuery UI也是jQuery插件，只不过专指由jQuery官方维护的UI方向的插件。
jQuery UI 拥有如下特点：
1，容易使用
2，极强的配置性
3，多主题
你可以去 http://jqueryui.com/download下载jQuery UI的所有内容。

2.小试牛刀

今天的效果是一个slider效果，根据jQuery UI官方的例子说明，我们需要总计3个JS文件：
(1)jQuery.js
(2)ui.core.js
(3)ui.slider.js
同时需要一个CSS文件:
(1)jquery-ui-1.7.2.custom.css
我们在网页中把它们全部引入，然后给一个div元素应用插件，代码如下：
$(function() {
$(".drag_cont_btn").slider();
});
OK,此时你已经完成了jQuery UI插件的调用，来看看我们的成果吧。
http://www.cssrain.cn/demo/drag_scroll/demo1.html

3.添加HTML代码

在这一步中，你要注意:怎么要嵌套XHTML才能使代码更为简单。良好的XHTML嵌套方式对代码的编写有非常大的帮助。
你可以使用Firefox的firebug来查看我的网页结构。
http://www.cssrain.cn/demo/drag_scroll/demo2.html

4.创建Slider

在上一步中，slider并没有跟图片列表关联起来。这一步我们来完成它。
通过查看jQuery UI slider的API，我们可以找到2个非常有用的参数：
(1)max:滑动块的宽度的最大值
(2)slide:滑动时的回调函数
通过设置max，我们可以给滑动块一个范围。通过使用slide这个回调函数，我们可以控制图片列表滚动。
关键代码：
// slider将要用到的参数:
// (1)max:最大值
// (2)slide:滑动时动态改变容器的left.
var sliderOpts = {
max: width - parseInt($dragCont.css("width")),
slide: function(e, ui) {
$contain.css("left", "-" + ui.value + "px");
}
};
//创建slider
$button.slider(sliderOpts);
具体例子：
http://www.cssrain.cn/demo/drag_scroll/demo3.html

5.隐藏不必要的部分

只所以把这步放到这里说，主要是想让大家知道下 这个 动画的实际原理。隐藏不必要的部分相信大家都明白怎么做。使用CSS的overflow:hidden即可。加到哪个元素上，这个不要我说了吧。
具体例子：
http://www.cssrain.cn/demo/drag_scroll/demo4.html

6.多行列表

通过前面几步的学习，制作一个多行的列表岂不是小菜一碟了。
改进步骤如下：
(1)相应元素的高度增加1倍。
(2)JS 计算元素宽度时，除以2。
具体例子：
http://www.cssrain.cn/demo/drag_scroll/demo5.html

7.竖向列表？

前面我们已经把单行，多行列表的slider效果做完了，如果现在要你做一个竖向的slider效果，你能做出来吗？

本文代码下载：
http://www.cssrain.cn/demo/drag_scroll/drag_scroll.rar