仿Google的一个鼠标拖动效果

http://www.cssrain.cn/article.asp?id=1377

 

 

仿Google的一个鼠标拖动效果.

 

在 igoogle 的娱乐频道栏目里，有一个非常酷的效果，它能通过鼠标的拖动 来控制 视频显示区域 的滚动 。
截图：

 

1，基本布局

 

我们在网页中加入 40 个 li 元素，同时不限制 ul 的高度。
显示效果如下：
http://www.cssrain.cn/demo/igooglevideo/demo1.html

 

2，将多余的加入滚动条

 

这步非常简单，只需要通过height: 400px; overflow: auto; 2个css属性，即可对列表加入滚动条。
具体代码可以看Demo2:
http://www.cssrain.cn/demo/igooglevideo/demo2.html

 

3，如何控制滚动条滚动呢？

 

通过JavaScript的对象有一个属性：scrollTop。它能控制滚动条距对象上边的距离。它不仅能被获取，也能被设置。
需要注意的是：scrollTop 这个属性总是非负数，尽管它可以设成负数，但是对于小于0的数，它会自动设置成0。如果大于自身的最大scrollTop高度，那么将设置为最大的scrollTop值。
代码如下：

var obj = $("#scroll")[0]; //Dom对象

$("#down").click(function(){

obj.scrollTop += 200;

});

$("#up").click(function(){

obj.scrollTop -= 200;

});

具体代码可以也可以看Demo3:
http://www.cssrain.cn/demo/igooglevideo/demo3.html

 

 

4，如何加入动画？

 

Demo3中已经实现了控制scrollTop，那么改成动画就非常简单了。只需要换成 jquery的 animate 方式即可。
请看Demo4：
http://www.cssrain.cn/demo/igooglevideo/demo4.html

 

5，通过鼠标拖动来控制滚动

 

通过鼠标拖动来控制Div滚动，我们需要注意有3个状态：mousedown,mouseup,mouseleave。其中mousedown里包含 mousemove。 mousedown的时候，记录初始化位置，同时启动mousemove，在movesemove里 计算 每次滑动的距离，即时滚动。 mouseup和mouseleave 都是用来解除mousemove的事件。当然，最重要的就是 mousemove 这个 事件了。
另外要注意一个属性,e.pageX来获取鼠标点击的绝对位置。
请看Demo5：
http://www.cssrain.cn/demo/igooglevideo/demo5.html

 

6，改成动画滚动模式

 

和前面一样，只需要把控制scrollTop的方式 换成 jquery的 animate 方式即可。
需要注意的是，动画模式要清除动画。.stop(true, false).
请看Demo6：
http://www.cssrain.cn/demo/igooglevideo/demo6.html

 

7，最终效果

 

把滚动条去掉，把overflow:auto -- > overflow:hidden;即可达到效果， 但直接改css这个并不太好。为什么？当用户禁用javascript的时，那么截断的部分将无法显示。所以我们仍保持css中的overflow为 auto，通过js来重新设置overflow为 hidden；当用户启用js的时候，才设置为hidden。禁用js的时候，那么列表将会出现默认的滚动条，保证了可用性。
请看Demo7：
http://www.cssrain.cn/demo/igooglevideo/demo7.html

本例下载：
http://www.cssrain.cn/demo/igooglevideo/igooglevideo.rar