一个小滑块

前端入坑纪 42

时隔月余，忙着学习MUI和Vue.js框架，断更已久，抱歉。
接下来会抽空补发近期项目中碰到的一些小效果，如果时间允许也会发些学习框架的笔记上来！

好，入正题！

OK，first things first！ github项目地址

素颜截屏

HTML 结构

a 标签代表滑块，div.line 代表滑块的“轨道”

CSS 结构

       body {
            padding-top: 30px
        }
        
        #line {
            height: 6px;
            width: 80%;
            margin: 0 auto;
            position: relative;
            background-color: lightblue
        }
        
        #bir {
            position: absolute;
            left: 0;
            top: -8px;
            display: block;
            height: 20px;
            line-height: 20px;
            width: 12px;
            text-align: center;
            color: #333;
            border: 1px solid #ccc;
            background-color: #dedede;
        }

所以理所应当，滑块是相对于div.line绝对定位的，滑动的时候变更滑块的left就对了

那么问题来了，如何确定left的值就成了最关键的问题？答案如下

示意图

JS 结构

      // 新建个getPosition函数，用来循环获取传入节点的定位父级offsetParent相对于各自定位父级的offsetLeft，offsetTop (这里我们只需要offsetLeft，关于offsetParent的理解，请小伙伴们自行百度，这里就不赘述了)
        function getPosition(node) {
            var left = node.offsetLeft;
            var top = node.offsetTop;
            var current = node.offsetParent;

            while (current != null) {
                left += current.offsetLeft;
                top += current.offsetTop;
                current = current.offsetParent;
            }

            return {
                "left": left,
                "top": top
            }
        }

        var oBir = document.getElementById('bir')
        var oLine = document.getElementById('line')

// 给滑块添加滑动时的要执行的函数
        oBir.addEventListener("touchmove", function(evt) {
            console.log("move")
// exChange就是鼠标点击滑块时相对于视口x轴上的距离evt.touches[0].clientX  减掉 div.line距离视口x轴上的那部分距离
            var exChange = evt.touches[0].clientX - getPosition(oLine).left
// if else 判定滑块的最大和最小值，以免滑出div.line
            if (exChange < 0) {
                exChange = 0
            } else if (exChange > oLine.offsetWidth) {
                exChange = oLine.offsetWidth - 12
            }
            oBir.style.left = exChange + "px"
        })

在做滑块时百度了下，想来原理大致这样就没错了！

好了，到此，本文告一段落！感谢您的阅读！祝您和您的家人身体健康，阖家幸福！