手机端效果（一）滑块效果

Kross 发布于2019-08-21 15:02 / 2986人阅读

摘要：现在写前端代码有各种各样的框架和库，轻轻松松就实现我们要的功能，写久了，原生可能会模糊，为了巩固，会陆续写一些原生的代码，今天就从这个开始。先上效果手机端的滑块效果，做的可能都会遇到过，下面来一次实现。

现在写前端代码有各种各样的框架和库，轻轻松松就实现我们要的功能，写久了，原生js可能会模糊，为了巩固，会陆续写一些原生的代码，今天就从这个开始。

先上效果：

手机端的滑块效果，做webapp的可能都会遇到过，下面来一次实现。

html结构

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

GPU云服务器云服务器 js 移动端效果图漂浮效果漂移效果切换效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88082.html

手机端效果（一）滑块效果

摘要：现在写前端代码有各种各样的框架和库，轻轻松松就实现我们要的功能，写久了，原生可能会模糊，为了巩固，会陆续写一些原生的代码，今天就从这个开始。先上效果手机端的滑块效果，做的可能都会遇到过，下面来一次实现。现在写前端代码有各种各样的框架和库，轻轻松松就实现我们要的功能，写久了，原生js可能会模糊，为了巩固，会陆续写一些原生的代码，今天就从这个开始。先上效果：showImg(https:...

Muninn 2019-08-30 13:19 评论0 收藏0
手机端效果（一）滑块效果

摘要：现在写前端代码有各种各样的框架和库，轻轻松松就实现我们要的功能，写久了，原生可能会模糊，为了巩固，会陆续写一些原生的代码，今天就从这个开始。先上效果手机端的滑块效果，做的可能都会遇到过，下面来一次实现。现在写前端代码有各种各样的框架和库，轻轻松松就实现我们要的功能，写久了，原生js可能会模糊，为了巩固，会陆续写一些原生的代码，今天就从这个开始。先上效果：showImg(https:...

sean 2019-08-01 16:09 评论0 收藏0
仿支付宝滑块验证码效果的手机端实现

摘要：为了加强验证功能，减少的被攻击。队长要求做一个支付宝的滑块验证效果。通过查找大多数案例都是端展示效果，在手机端并不能友好展示。原文链接仿支付宝滑块验证码效果的前端实现展示效果图滑块效果的前端实现。为了加强验证功能，减少APP的被攻击。队长要求做一个支付宝的滑块验证效果。除了它外观和用户体验上的优秀外，它的安全性并未降低，通过对用户行为的分析保证了安全校验。通过查找大多数案例都是P...

android_c 2019-08-02 10:11 评论0 收藏0
如何用原生js来写一个swiper滑块插件（上）原理

嗨~ 这里是芝麻，今天我们一块来做一个滑块插件。那么啥是滑块插件呢？滑块插件能干嘛呢？请看下图： showImg(https://user-gold-cdn.xitu.io/2019/5/27/16af8370362d18e4); 是不是有点印象了，没错，他的最基本的用法就是左右滑动，插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果，不过你完全可以组合各种元素来适应不同的场景...

Dionysus_go 2019-05-27 17:41 评论0 收藏0