想給網(wǎng)頁添加一個滑動條，于是查找資料找到了html5中input類型中的range酌媒，試著用了一下在各個瀏覽器的樣式差別太大候齿，而且不太好看。果斷放棄瞳筏，不如自己用 javascript寫一個稚瘾，效果圖如下：

通過圖片可以看出來用了 3 個 div
1、可以被鼠標拖拽的 小人 用來作為可以拖拽的按鈕
2姚炕、整個可填充的 白色長條
3摊欠、可變化長度的 黑色長條

思路很簡單：
一個可以鼠標拖拽的div，只能橫向移動柱宦，移動的同時改變黑色長條的width些椒。還要限制移動的范圍只能在白色長條的范圍內(nèi)。

限制：
1掸刊、兩個端點的數(shù)值跟鼠標的位置有關(guān)免糕，會出現(xiàn)略微的抖動
2、不能用于移動端的設(shè)備，也不建議用于移動端说墨，效果不好，就不放移動端的代碼了
3苍柏、不能用于過于精細的操作中尼斧，兩端的數(shù)值不是很準

css代碼如下：（從新抽取的代碼，有點丑）

html,
body {
    margin: 0px;
    height: 100%;
}
.tool{
    height: 20%;
    width: 100%;
    margin: auto;
    position: relative;
}
/*拖拽按鈕的樣式*/
#ball{
    height: 80%;
    width: 10%;
    position: absolute;
    left: 5%;
    cursor: move;
    background-color: #ff55ff;
    z-index: 1;
}
/*底層長條*/
#range{
    width: 90%;
    height: 20%;
    background-color: #00ffff;
    border-radius: 20px;
    position: absolute;
    bottom: 50%;
    left: 5%;
}
/*頂層長條*/
#rangeTop{
    width: 5%;
    height: 20%;
    background-color: #000000;
    border-radius: 20px;
    position: absolute;
    bottom: 50%;
    left: 5%;
}

html和js代碼如下：

<div class="tool" id="rangeAll">
    <div id="ball"></div>
    <div id="range"></div>
    <div id="rangeTop"></div>
</div>

<script type="text/javascript">
    var body = document.getElementsByTagName("body")[0];
    //自定義range试吁，好用棺棵，杠杠的
    var ball=document.getElementById("ball")
    var range=document.getElementById("range")
    var rangeTop=document.getElementById("rangeTop")
    //聲明全局變量
    var leftCha,topCha;
    //定義鼠標是否按下的標識
    var isDown = false;

    ball.onmousedown = function(e){
             var e = e || window.event;
             leftCha = e.clientX - ball.offsetLeft;
             isDown = true;
    }
    window.onmousemove = function(e){
         var e = e || window.event;
         if(!isDown){
                 return;  //終止程序執(zhí)行
         }
         if(ball.offsetLeft<range.offsetLeft){
             ball.style.left =range.offsetLeft+"px"
             isDown = false;
             return
         }
         if(ball.offsetLeft>range.offsetWidth){
             ball.style.left =range.offsetWidth+"px"
             isDown = false;
             return
         }
         
         ball.style.left = e.clientX - leftCha + 'px';
         rangeTop.style.width=ball.offsetLeft+"px"
         /*改變透明度，我用來改變亮度*/
         body.style.opacity=((range.offsetWidth-ball.offsetLeft*0.7)/range.offsetWidth)
             
    }
    ball.onmouseup = function(e){
             isDown = false;
    }               
</script>

改位置熄捍，改背景烛恤，改顏色，個人看著辦余耽。js中數(shù)值的綁定慢慢琢磨吧缚柏！