jscroll.js实现QQ软件滚动条

作者:林炜贤来源:www.163css.com发表时间:(2012-09-10)

前几天我们刚做过一个滚动条,“scrollbar.js实现竖向滚动条”,当时觉得它实现的功能有点单调,它是通过模拟实现的,就算高度没有超出,滚动条依然存在着,显然用户体验很不好。。。

今天我们还是采用jscroll这个插件来实现滚动条的美化,在10年的时候,我就写过这样的文章,但当时GOOGLE浏览器还没大量使用,结果,现在测试了一下,发现当时做得不兼容,无奈,只能重新搞一个了。。。

那么我们今天要实现的是以QQ软件为例子,因为我们每天都在使用QQ软件,当然,我们只是实现滚动条的功能,其它的做不了。。

脚本方面还是很熟悉的:

我们的滚动条宽度为10PX,地址为images/s_bg3.gif,背景色是通过-50px定位然后循环读出来的,圆角部分,我是通过css3实现的,jscroll-h,这是滑块部分,我将背景色设置为“d8e8c9”,向上的按钮是uBg,向下是dBg,这些,对于习惯CSSSPITE技术的人来说,定位就很清楚了。。

这里跟大家提下在写样式时必须注意的地方:由于里面的图片列表我采用了float,jscroll-e和jscroll-c都要float。。。

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.net/net163/cssjs/2012/09/qqscroll/index.html

下载地址:jscroll_js实现QQ软件滚动条.zip

返回作者主页:www.163css.com阅读 (7088)
更多 1