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

sean 發布于2019-08-01 16:09 / 1535人閱讀

摘要：現在寫前端代碼有各種各樣的框架和庫，輕輕松松就實現我們要的功能，寫久了，原生可能會模糊，為了鞏固，會陸續寫一些原生的代碼，今天就從這個開始。先上效果手機端的滑塊效果，做的可能都會遇到過，下面來一次實現。

現在寫前端代碼有各種各樣的框架和庫，輕輕松松就實現我們要的功能，寫久了，原生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 移動端效果圖漂浮效果漂移效果切換效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50334.html

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

摘要：現在寫前端代碼有各種各樣的框架和庫，輕輕松松就實現我們要的功能，寫久了，原生可能會模糊，為了鞏固，會陸續寫一些原生的代碼，今天就從這個開始。先上效果手機端的滑塊效果，做的可能都會遇到過，下面來一次實現。現在寫前端代碼有各種各樣的框架和庫，輕輕松松就實現我們要的功能，寫久了，原生js可能會模糊，為了鞏固，會陸續寫一些原生的代碼，今天就從這個開始。先上效果：showImg(https:...

Muninn 2019-08-30 13:19 評論0 收藏0
手機端效果（一）滑塊效果

摘要：現在寫前端代碼有各種各樣的框架和庫，輕輕松松就實現我們要的功能，寫久了，原生可能會模糊，為了鞏固，會陸續寫一些原生的代碼，今天就從這個開始。先上效果手機端的滑塊效果，做的可能都會遇到過，下面來一次實現。現在寫前端代碼有各種各樣的框架和庫，輕輕松松就實現我們要的功能，寫久了，原生js可能會模糊，為了鞏固，會陸續寫一些原生的代碼，今天就從這個開始。先上效果：showImg(https:...

Kross 2019-08-21 15:02 評論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