一个小滑块

前端入坑纪 42

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

好,入正题!

OK,first things first! github项目地址

素颜截屏
HTML 结构
    <div class="wrap">
        <div id="line">
            <a href="javascript:;" id="bir"></a>
        </div>
    </div>

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"
        })

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,863评论 1 92
  • 有火从耶和华面前出来,在坛上烧尽燔祭和脂油。众民一见,就都欢呼,俯伏在地。《利未记》9章24节 今天终于明白了,火...
    溪水边的小羊阅读 220评论 0 0
  • 脱去晨曦做的的外衣 披上彩云做的婚裙 我亲爱的骄阳 它羞涩的躲藏在云里 喔 我亲爱的新娘 我渴望着你的热情似火 我...
    瞿静阅读 161评论 0 3
  • “本文参加#我的故城,我的故事#活动,本人承诺,文章内容为原创,且未在其它平台发表过。” 人们都说:“桂林山水甲天...
    b7a61808406f阅读 466评论 1 1
  • <<前任3:再见前任>>:一开始以为是挽留,后来才知道是放手 文/凡人青衫 “我们会像紫霞仙子和至尊宝一样分开吗”...
    凡人青衫阅读 2,205评论 0 6