【jquery】jquery 自定义滚动条

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

调用方法：

$("#a").jscroll();

demo：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8"/>
    <title>demo</title>
    <link rel="stylesheet" type="text/css" href="/css/base.min.css" media="all"/>
    <style type="text/css">
    #a{width:500px;overflow:hidden;position:relative;height:200px;background:#f5f5f5;}
    </style>
</head>
<body>
    <div id="a">
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>底部</p>
    </div>
</body>
</html>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.jscroll.js"></script>
<script type="text/javascript">
$(function(){
    $("#a").jscroll();
});
</script>

高级应用（自定义滚动条背景及上下按钮）：

调用图片：

demo：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8"/>
    <title>demo</title>
    <link rel="stylesheet" type="text/css" href="/css/base.min.css" media="all"/>
    <style type="text/css">
    #a{width:500px;overflow:hidden;position:relative;height:200px;background:#f5f5f5;}
    </style>
</head>
<body>
    <div id="a">
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>底部</p>
    </div>
</body>
</html>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.jscroll.js"></script>
<script type="text/javascript">
$(function(){
    $("#a").jscroll({ 
        W:"15px",    //设置滚动条宽度
        BgUrl:"url(/images/s_bg2.gif)",    //设置滚动条背景图片地址
        Bg:"right 0 repeat-y",    //设置滚动条背景图片position,颜色等
        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,    //是否显示上下按钮 false为不显示
            uBg:{    //设置上按钮背景：鼠标离开(默认)，经过，点击
                Out:"0 0",
                Hover:"-15px 0",
                Focus:"-30px 0"
            },
            dBg:{    //设置下按钮背景：鼠标离开(默认)，经过，点击
                Out:"0 -15px",
                Hover:"-15px -15px",
                Focus:"-30px -15px"
            }
        },
        Fn:function(){}    //滚动时候触发的方法
    });
});
</script>

下载 --> jquery.jscroll.js

原文地址：jquery滚动条jscroll美化滚动条,自定义滚动条

posted @ 2013-08-19 15:35  朱羽佳  阅读(18603)  评论(5)  编辑  收藏  举报
回顶部