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

作者: c05436bafae5 | 来源:发表于2016-12-21 18:31 被阅读0次

javascript滑块的实现（手机端触屏滑动调节大小）
TouchSlide 插件使用介绍
如何获取swiper中当的索引值
vue插件使用之swiper
在 Vue 中使用 Swiper ( vue-awesome-s
iOS-视图-UISlider 滑动条-滑块大小、不能滑动、不能
JS移动客户端--触屏滑动事件
swiper
swiper库入门介绍
Player移动控制

如下为可调节状态：

风量1.jpg

如下为不可调节状态：

风量2.jpg

html文件：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8;no-cache" />
    <title>slider</title>
    <link type="text/css" href="css/style_copy.css" rel="stylesheet" />
</head>
<body>

<div class="User_ratings" style="margin: auto">
    <span style="color:dodgerblue;float: left;font-size: 50px">风量调节</span>
    <div style="color:dodgerblue;float: right;font-size: 50px"><span id="title" style="color: black"></span> m³/h</div> <br>
    <div class="ratings_bars">
        <div class="scale" id="bar"> <!-- 轨道灰色背景 -->
            <div id="bgm"></div> <!-- 轨道 -->
            <span id="btn"></span> <!-- 滑块 -->
        </div>
    </div>
</div><br><br><br><br><br><br>

<button id="button" value="open" onclick="changeSlider()">切换按钮状态</button>   //button切换可调节和不可调节状态

<script src="slider.js"></script>

</body>
</html>

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