【jquery】jquery 自定義滾動條

時間 2019-12-01

原文原文鏈接

能夠自由的給滾動條定義背景，上下按鈕，固然不單單是顏色，連圖片當背景也能夠。支持鼠標滾輪，點擊滾動條滾軸定位，上下按鈕久按加速，兼容 ie，firefox，chrome。javascript

調用方法：css

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

demo：html

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

高級應用（自定義滾動條背景及上下按鈕）：java

調用圖片：jquery

demo：chrome

<!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.jsapp

原文地址：jquery滾動條jscroll美化滾動條,自定義滾動條測試

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。