手機端效果（一）滑塊效果

如今寫前端代碼有各類各樣的框架和庫，輕輕鬆鬆就實現咱們要的功能，寫久了，原生js可能會模糊，爲了鞏固，會陸續寫一些原生的代碼，今天就從這個開始。

先上效果：

手機端的滑塊效果，作webapp的可能都會遇到過，下面來一次實現。

html結構

<div class="range">
        <div class="range-progress"></div>
        <span class="range-bar"></span>
        <span class="range-text"></span>
 </div>

css代碼：

*{
            box-sizing: border-box;
        }
        .range{
            width: 90%;
            height: 40px;
            position: relative;
            margin: auto;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }
        .range:before,.range-bar,.range-text,.range-progress{
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
        }
        .range:before{
            content: '';
            display: block;
            background-color: #ccc;
            width: 100%;
        }
        .range:before,.range-progress{
            height: 2px;
            left:0;
        }
        .range-bar{
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color:#ccc ;
        }
        .range-progress{
            background-color:#00b3ee;
        }
        .range-text{
            top:100%;
            left:90%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            color:#999;
        }

js邏輯

/*阻止頁面的默認滑動*/
        window.addEventListener('touchmove',function (e) {
            e.preventDefault();
        })
        var range=$('.range');
        var bar=$('.range-bar');
        var progress=$('.range-progress');
        var text=$('.range-text');
        var maxw=range.offsetWidth-bar.offsetWidth;//計算可滑動的最大距離
        var rangex=range.offsetLeft;
        var half=bar.offsetWidth/2;

        bar.addEventListener('touchstart',function (event) {
            var left=event.touches[0].pageX-rangex-half;
            render(left);
            event.preventDefault();
        })
        range.addEventListener('touchmove',function (event) {
            /*計算滑塊的left距離*/
            var left=event.touches[0].pageX-rangex-half;
            render(left);
        });
        range.addEventListener('touchstart',function (event) {
            var left=event.touches[0].pageX-rangex-half;
            render(left);
        })

        //顯示位置
        function render(value) {
            var left=value;
            /*判斷left距離不能小於0而且不能大於最大寬度*/
            if(left<=0){
                left=0;
            }
            if(left>=maxw){
                left=maxw;
            }
            /*顯示滑塊的位置、進度條的長度、進度值*/
            bar.style.left=left+'px';
            progress.style.width=left+'px';
            text.innerText=Math.ceil(left/maxw*100)+'%';
        }
        function $(s) {
            return document.querySelector(s)
        }