h5手动滑动进度条效果（移动端）

公司项目需要在手机上做手动滑动进度条的效果（移动端），自己琢磨了一下，用原生js和h5的touchmove事件写了这个效果，可以参考一下，先看看效果图。

红色的圆点可以在黑色区域任意滑动。全部代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!--为移动设备添加 viewport-->
        <meta name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <!-- 优先使用IE最新版本或chrome -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <!-- 设置iphone对手机号码显示不高亮 -->
        <meta name="format-detection" content="telephone=no">
        <title>手动滑动进度条</title>
        <style type="text/css">
            #div1{
                  background: black;
                  width:100%;
                  height: 30px;
                  overflow: hidden;
                  position: relative;
                  margin: 50px auto;
             }
            #div2{
                height: 30px;
                width: 30px;
                background: red;
                position: absolute;
                left:0px;
                top:0px;
                border-radius: 30px;
            }
        </style>       
    </head>
    <body style="margin: 0;">
        <div id="div1" class="clearfix">
             <div id="div2"></div>
        </div>
    </body>
    <script type="text/javascript">
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");       
        div2.addEventListener('touchmove', function(event) {
            event.preventDefault();
            var styles = window.getComputedStyle(div1,null);
            var width=styles.width;//灰色块的长度，用于计算红色块最大滑动的距离
            console.log(width);
            if (event.targetTouches.length == 1) {
                var touch = event.targetTouches[0];
                //计算红色块的left值，pageX是相对于整个页面的坐标，减去15（红色块长度的一半）是为了让鼠标点显示在中间，可以更改值看看效果，如果灰色块不是紧挨着屏幕，那还需要计算灰色块距离左屏幕的距离，应为pageX！！！
                moveleft = touch.pageX-15;
                if(moveleft<=0){//红色块的left值最小是0；
                    moveleft=0;
                };
                if(moveleft>=parseInt(width)-30){////红色块的left值最小是灰色块的width减去红色块的width；
                    moveleft=parseInt(width)-30;
                }
                div2.style.left=moveleft+"px";//最后把left值附上。
            };
        });
    </script>
</html>

大致思路：黑色区域relative，红色圆点是absolute，初始left值是0。当红色圆点滑动时获取它相对屏幕左侧的值pageX，根据这个值就算出红色圆点的left值，left值的范围是黑色区域，要做好判断，最后改变红色圆点的left值就可以了。我测试的安卓和苹果的效果都还可以，还比较流畅。

h5手动滑动进度条效果（移动端）

猜你喜欢