仿Google的一个鼠标拖动效果(转)
2009-07-14 11:07
316 查看
http://www.cssrain.cn/article.asp?id=1377
截图:
显示效果如下:
http://www.cssrain.cn/demo/igooglevideo/demo1.html
具体代码可以看Demo2:
http://www.cssrain.cn/demo/igooglevideo/demo2.html
需要注意的是:scrollTop 这个属性总是非负数,尽管它可以设成负数,但是对于小于0的数,它会自动设置成0。如果大于自身的最大scrollTop高度,那么将设置为最大的scrollTop值。
代码如下:
具体代码可以也可以看Demo3:
http://www.cssrain.cn/demo/igooglevideo/demo3.html
请看Demo4:
http://www.cssrain.cn/demo/igooglevideo/demo4.html
另外要注意一个属性,e.pageX来获取鼠标点击的绝对位置。
请看Demo5:
http://www.cssrain.cn/demo/igooglevideo/demo5.html
需要注意的是,动画模式要清除动画。.stop(true, false).
请看Demo6:
http://www.cssrain.cn/demo/igooglevideo/demo6.html
请看Demo7:
http://www.cssrain.cn/demo/igooglevideo/demo7.html
本例下载:
http://www.cssrain.cn/demo/igooglevideo/igooglevideo.rar
仿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
相关文章推荐
- 一个使用Jquery写的一个鼠标拖动效果
- 一个使用Jquery写的一个鼠标拖动效果
- Jquery写一个鼠标拖动效果实现原理与代码
- 一个拖动鼠标写字的效果
- Jquery写一个鼠标拖动效果实现原理与代码
- js鼠标拖动效果
- 转载:一个封装好的拖动层效果
- JS实现超简单的鼠标拖动效果
- 一个简单的行拖动效果
- cocos2dx 3.2 实现鼠标拖动精灵移动的效果!
- JS响应鼠标点击实现两个滑块区间拖动效果
- 鼠标拖动虚影效果
- 自己动手搞一个拖动滑块,点击水波纹效果
- jq点击和鼠标移上效果以及一个等号"=" 二个等号"==" 三个等号"===" 的区别
- 鼠标经过黑白变彩色效果,另外还一个提交验证
- 微信小程序实现鼠标拖动效果示例
- 用javascript写简单的鼠标拖动效果
- hammer使用: 代码:捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果
- js实现一个可以兼容PC端和移动端的div拖动效果
- easyui实现鼠标移到某一行,就会弹出一个提示信息效果