前几天我们刚做过一个滚动条,“scrollbar.js实现竖向滚动条”,当时觉得它实现的功能有点单调,它是通过模拟实现的,就算高度没有超出,滚动条依然存在着,显然用户体验很不好。。。
今天我们还是采用jscroll这个插件来实现滚动条的美化,在10年的时候,我就写过这样的文章,但当时GOOGLE浏览器还没大量使用,结果,现在测试了一下,发现当时做得不兼容,无奈,只能重新搞一个了。。。
那么我们今天要实现的是以QQ软件为例子,因为我们每天都在使用QQ软件,当然,我们只是实现滚动条的功能,其它的做不了。。
脚本方面还是很熟悉的:
<script type="text/javascript">
$(document).ready(function(){
$("#ee").jscroll({
W:"10px"
,BgUrl:"url(/myweb/net163/template/net163/cssjs/2012/09/qqscroll/images/s_bg3.gif)"
,Bg:"-26PX 0 repeat-y"
,Bar:{Bd:{Out:"#a3c3d5",Hover:"#b7d5e6"}
,Bg:{Out:"-50px 0 repeat-y",Hover:"-50px 0 repeat-y",Focus:"-50px 0 repeat-y"}}
,Btn:{btn:true
,uBg:{Out:"0 0",Hover:"0 0",Focus:"0px 0"}
,dBg:{Out:"0 -21px",Hover:"0 -21px",Focus:"0 -21px"}}
,Fn:function(){}
});
});
</script>
我们的滚动条宽度为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