javascript滑块的实现（手机端触屏滑动调节大小）

如下为可调节状态：

风量1.jpg

如下为不可调节状态：

风量2.jpg

html文件：

    
    
    




    风量调节
    
 m³/h
 

    

        
 
            
 
             
        
    








切换按钮状态   //button切换可调节和不可调节状态

javascript文件（包含的一些数字是测量的实际image大小，用于计算风量大小、滑块位置等信息）：

var div1 = document.getElementById('btn');
var div2 = document.getElementById('button');
var div3 = document.getElementById('bgm');

function changeSlider() {
    if (div2.value == "close") {
        div1.style.background = "url(images/3.png)";
        div2.value = "open";
        div3.style.backgroundColor = "dodgerblue";
    } else if (div2.value == "open") {
        div1.style.background = "url(images/4.png)";
        div2.value = "close";
        div3.style.backgroundColor = "grey";
    }
}

var num = 10;    //默认初始数值为10
var num001 = num / 1.6;
var w = document.getElementById('bar').clientWidth;
var www001 = 3000 / w;
var www002 = 3200 / w;

scale = function (btn, bar, title) {
    this.btn = document.getElementById(btn);
    this.bar = document.getElementById(bar);
    this.title = document.getElementById(title);
    this.step = this.bar.getElementsByTagName("DIV")[0];
    this.init();
};


scale.prototype = {
    init: function () {
        var t = this;
        var d = document;

        this.step.style.width = (num001 + www001) + '%'; //进度条初始位置
        this.title.innerHTML = num;//风量数值
        this.btn.style.left = (num001 - www002)  + '%';//滑块初始位置


            t.btn.addEventListener('touchstart', function (e) {
                    var touchobj1 = e.changedTouches[0];
                    var x = touchobj1.clientX;
                    var l = this.offsetLeft;
                    var z = t.bar.offsetWidth;


                    d.addEventListener('touchmove', function (e) {
                        if (div2.value == "open") {
                            var touchobj2 = e.changedTouches[0];
                            var thisX = touchobj2.clientX;
                            var to = Math.min(z, Math.max(0, l + 34 + (thisX - x)));
                            t.btn.style.left = to - 34 + 'px';
                            t.ondrag(Math.round(Math.max(0, to / z) * 160), to);
                        } else {
                            return false;
                        }
                    }, false);

                    d.addEventListener('touchend', function (e) {
                        this.touchmove = null;
                    }, false);

            }, false);
    },

    ondrag : function (pos, x) {
        this.step.style.width = Math.max(0, x)  + 'px';
        this.title.innerHTML = pos + '';
    }

};

 new scale('btn', 'bar', 'title');

css文件：

@charset "utf-8";/* CSS Document */
body {
    padding:0;
    background:rgb(235,237,240);
    margin-top: 5%;
    margin-left: 15%;
    margin-right: 15%;
}


.User_ratings .ratings_bars {
    margin-top:10px;
    width: 100%;
    float:left;
}

.User_ratings .ratings_bars .scale {
    width:70%;
    height:34px;
    margin:3% 0 0 0 ;
    position:absolute;
    background-color: #bfbebe;
    box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112,0 0 0 10px #bfbebe;
    background-size: 100% 33px;
    border-radius: 25px;
}

.User_ratings .ratings_bars .scale div {
    position:absolute;
    height:34px;
    background-color: dodgerblue;
    box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
    background-size:100% 30px;
    border-radius: 25px;
}

.User_ratings .ratings_bars .scale span {
    width:68px;
    height:68px;
    position:absolute;
    top:-20px;
    cursor:pointer;
    background:url(../images/3.png) no-repeat;
}