仿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
分享到:
相关推荐
仿Google首页的模块拖动效果源码 可以直接运行,兼容FF IE ,已测试过
仿Google小工具jQuery拖动特效是一款不错的自定义的界面组件,适用于用户自定义拖动层布局。
仿google首页拖动的一个很完美的例子,支持最小化和关闭,支持最小化和关闭功能。页面比较漂亮,在ie和firefox下测试均无问题..
仿google拖动div 的应用仿google拖动div 的应用
js实现模拟google首页模块拖动效果,模拟google首页模块拖动效果
jquery实现的带有分页效果的仿google的自动补齐效果
仿Google页面效果完美版源码(HTML+JavaScript)! 值得下载看看!资源免费,大家分享!!
完美的仿Google页面效果,方便用户体验,还美观。用HTML+JavaScript实现,很容易调用。跟大家共享一下。
超酷仿GOOGLE首页导航菜单效果 超酷仿GOOGLE首页导航菜单效果 超酷仿GOOGLE首页导航菜单效果
仿Google小工具jQuery拖动特效适用于用户自定义拖动层布局.zip
php+ajax仿百度谷歌搜索下拉效果,亲测可用
类似GOOGLE拖动效果,层拖动效果很8错!需要的同志看看!
仿Google导航效果超酷导航条免费放出,适合任何...看到好多人喜欢googel导航效果而站长又都不知道怎么制作,今天我免费送给大家一个googel导航效果。把鼠标移到导航栏目那,神奇的效果出现啦。也可以做HOME页面,漂亮。
这是一个以AS2.0为核心的Flash仿Google地图源码,包含一个javascript实例应用效果,支持点击放大,拖动框选放大效果。
这里用jQuery.js库写了一个仿Google首页拖动的特效代码 <!DOCTYPE html> <html> <head> <meta http-equiv=content-type content=text/html; charset=utf-8/> <title>用JQUERY实现的仿...
仿Google导航条效果 Google导航条,仿Google导航条效果
用php+ajax写的仿百度谷歌搜索下拉自动提示框效果
为您提供-HTML+CSS模板,JS广告代码,网页特效,导航菜单,焦点幻灯片代码,仿google图片效果图片展示相册和CSS技巧