此方法需要引入一个插件:jscroll.js.
[img]http://dl2.iteye.com/upload/attachment/0086/4503/7702f466-9d0a-3396-b8d6-6ff7a73ef21c.jpg[/img]
以下为滚动条样式设置的详细说明:
下面请看例子:
例1:
代码:
结果:
[img]http://dl2.iteye.com/upload/attachment/0086/4517/bb2e3c53-27e2-3421-9ca9-8739bb9df7e0.jpg[/img]
例2:
代码:
结果:
[img]http://dl2.iteye.com/upload/attachment/0086/4536/d406d8c0-ed1e-33c7-8a66-41d6012f9224.jpg[/img]
例3:
代码:
结果:
[img]http://dl2.iteye.com/upload/attachment/0086/4538/215c9865-8e10-332b-a803-88e50f2dd766.jpg[/img]
例4:
代码:
结果:
[img]http://dl2.iteye.com/upload/attachment/0086/4540/5afa169f-71e5-337b-84e6-f98a4bd0b91f.jpg[/img]
文章来源:[url]http://app.soche8.com/show/jscoll/[/url]
[img]http://dl2.iteye.com/upload/attachment/0086/4503/7702f466-9d0a-3396-b8d6-6ff7a73ef21c.jpg[/img]
以下为滚动条样式设置的详细说明:
$(".dd").jscroll({ W:"12px"//设置滚动条宽度
,BgUrl:""//设置滚动条背景图片地址
,Bg:"#ccc"//设置滚动条背景图片position,颜色等
,Bar:{ Pos:"bottom"//设置滚动条初始化位置在底部
,Bd:{Out:"#000",Hover:"red"}//设置滚动滚轴边框颜色:鼠标离开(默认),经过
,Bg:{Out:"green",Hover:"#fff",Focus:"orange"}}//设置滚动条滚轴背景:鼠标离开(默认),经过,点击
,Btn:{ btn:true//是否显示上下按钮 false为不显示
,uBg:{Out:"black",Hover:"#fff",Focus:"orange"}//设置上按钮背景:鼠标离开(默认),经过,点击
,dBg:{Out:"black",Hover:"#fff",Focus:"orange"}}//设置下按钮背景:鼠标离开(默认),经过,点击
,Fn:function(){}//滚动时候触发的方法
});
下面请看例子:
例1:
代码:
<script type="text/javascript">
$(document).ready(function(){
$(".ff").jscroll({
W:"15px"
,BgUrl:"url(s_bg2.gif)"
,Bg:"right 0 repeat-y"
,Bar:{Pos:"bottom"
,Bd:{Out:"#a3c3d5",Hover:"#b7d5e6"}
,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}}
,Btn:{btn:true
,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"}
,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}}
,Fn:function(){}
});
});
</script>
结果:
[img]http://dl2.iteye.com/upload/attachment/0086/4517/bb2e3c53-27e2-3421-9ca9-8739bb9df7e0.jpg[/img]
例2:
代码:
<script type="text/javascript">
$(document).ready(function(){
$(".ff").jscroll({
W:"15px"
,BgUrl:"url(s_bg3.gif)"
,Bg:"right 0 repeat-y"
,Bar:{Pos:"bottom"
,Bd:{Out:"#a3c3d5",Hover:"#b7d5e6"}
,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}}
,Btn:{btn:true
,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"}
,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}}
,Fn:function(){}
});
});
</script>
结果:
[img]http://dl2.iteye.com/upload/attachment/0086/4536/d406d8c0-ed1e-33c7-8a66-41d6012f9224.jpg[/img]
例3:
代码:
<script type="text/javascript">
$(document).ready(function(){
$(".hh").jscroll({
W:"15px"
,BgUrl:"url(s_bg4.gif)"
,Bg:"right 0 repeat-y"
,Bar:{Pos:"bottom"
,Bd:{Out:"#a3c3d5",Hover:"#b7d5e6"}
,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}}
,Btn:{btn:true
,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"}
,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}}
,Fn:function(){}
});
});
</script>
结果:
[img]http://dl2.iteye.com/upload/attachment/0086/4538/215c9865-8e10-332b-a803-88e50f2dd766.jpg[/img]
例4:
代码:
<script type="text/javascript">
$(document).ready(function(){
$(".ii").jscroll({
W:"15px"
,BgUrl:"url(s_bg5.gif)"
,Bg:"right 0 repeat-y"
,Bar:{Pos:"bottom"
,Bd:{Out:"#a3c3d5",Hover:"#b7d5e6"}
,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}}
,Btn:{btn:true
,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"}
,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}}
,Fn:function(){}
});
});
</script>
结果:
[img]http://dl2.iteye.com/upload/attachment/0086/4540/5afa169f-71e5-337b-84e6-f98a4bd0b91f.jpg[/img]
文章来源:[url]http://app.soche8.com/show/jscoll/[/url]