可以自由的给滚动条定义背景 jquery

文章来自:http://app.soche8.com/show/jscoll/

可以自由的给滚动条定义背景，上下按钮，当然不仅仅是颜色，连图片当背景也可以。支持鼠标滚轮，点击滚动条滚轴定位，上下按钮久按加速，兼容firefox,谷歌

$("#tt").jscroll();//默认调用

demo:

$("#cc").jscroll({W:"12px"});//设置了滚动条宽度

demo:

$("#ee").jscroll({W:"12px",Btn:{btn:false}});//设置了滚动条宽度,去掉了上下按钮,比有按钮好看多了，当然按钮是为了设置背景用的hoho

demo:

/*-----------------以下为自定义滚动条样式，设置时注意逗号--------------*/

  $(".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(){}//滚动时候触发的方法
	});

demo:(滚轴初始化位置：底部)

<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>

<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>

<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>

<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>