demo.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta content="telephone=no" name="format-detection">
    <meta name="wap-font-scale" content="no">
    <title>果冻直播登录</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/layer.css">
    <link rel="stylesheet" href="css/index.css?v=2019041702">
    <script src="lib/fsize.js"></script>
    <style>
  

        .scale_panel {
            color: #999;
            position: absolute;
            line-height: 18px;
            left: 0.5rem;
            top: -0px;
        }

        .scale_panel>span:first-child {
            position: absolute;
            left: -0.5rem;
            font-size: 0.2rem;
        }

        .scale_panel>span:nth-child(2) {
            position: absolute;
            right: -0.5rem;
            font-size: 0.2rem;
        }

        .scale>span {
            background-color: red;
            width: 0.5rem;
            height: 0.5rem;
            position: absolute;
            top: -0.1rem;
            left: 0;
            cursor: pointer;
            border-radius: 50%;
            font-size: 0.2rem;
        }

        .scale {
            background-repeat: repeat-x;
            background-position: 0 100%;
            background-image: linear-gradient(to right, #08D7F2 0%, #2BF06A 50%, #2BF06A 50%, #FC6076 100%);
            border-left: 1px #83BBD9 solid;
            width: 9rem;
            height: 0.3rem;
            position: relative;
            border-radius: 0.2rem;
        }

        .scale>div {
            background-repeat: repeat-x;
            background-color: red;
            /*进度条颜色*/
            width: 0px;
            position: absolute;
            height: 0.3rem;
            width: 0;
            left: 0;
            bottom: 0;
            border-radius: 0.2rem 0 0 0.2rem;
        }
        .lanren{
            margin-top: 0.7rem;
        }
        .lanren>li {

            position: relative;
            list-style: none;
            font-size: 0.3rem;
        }

        #title {
            position: absolute;
            top: -0.6rem;
            left: 2.3rem;
        }
        .nimo{
            overflow: hidden;
            position: relative;
            width: 9rem;
            margin: 0 auto;
            height: 4.5rem;
        }
        .nimo .nimo-bg{
            width: 9rem;
        }
        .nimo .nimo-cover{
            width: 1.65rem;
            position: absolute;
            left: 0;
        }
    </style>
</head>

<body>
    <!-- 可拖拽进度条 -->

    <script src="lib/jquery-3.1.1.min.js"></script>
    <script>
        var myPos
        var myId
        $.ajax({
            url:'http://test.liveauth.ishuaji.cn/captcha/slide/webget.html',
            data:{
                phone:17722581707
            },
            type:"post",
            success:function(msg){
                var data = JSON.parse(msg)
                console.log(data)
                $(".nimo .nimo-bg").attr("src",""+data.background+"")
                $(".nimo .nimo-cover").attr("src",""+data.cover+"")
                var myTop=Math.floor((data.y/66.66)*100)/100
                $(".nimo-cover").css("top",myTop+"rem")
                myId=data.id
            }
        })
        // 进度条代码
        var scale = function (btn, bar, title) {
            this.btn = document.getElementById(btn);
            this.bar = document.getElementById(bar);
            this.title = document.getElementById(title);
            this.step = this.bar.getElementsByTagName("div")[0];
            this.init();
        };
        scale.prototype = {
            init: function () {
                var f = this, g = document, b = window, m = Math;
                f.btn.ontouchstart = function (e) {
                    var x = (e || b.event).touches[0].clientX;
                    var l = this.offsetLeft;
                    var max = f.bar.offsetWidth - this.offsetWidth;
                    g.ontouchmove = function (e) {
                        var thisX = (e || b.event).touches[0].clientX;
                        var to = m.min(max, m.max(-2, l + (thisX - x)));
                        f.btn.style.left = to + 'px';
                        f.ondrag(m.round(m.max(0, to / max) * 100), to);
                        b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
                    };
                    g.ontouchend = new Function('this.οnmοusemοve=null');
                };
            },
            ondrag: function (pos, x) {
                this.step.style.width = Math.max(0, x) + 'px';
                // this.title.innerHTML = pos + '%';
                myPos=pos
                $(".nimo-cover").css("left",pos+"%")
            },
        
        }
        new scale('btn', 'bar', 'title');
        $("#btn").on("touchend",function(){
            console.log(myPos)
            $.ajax({
                url:'http://test.liveauth.ishuaji.cn/captcha/slide/check.html',
                data:{
                    data:myId+myPos*6,
                    checktype:2,
                    pkg:'gzh'
                },
                success:function(msg){
                    var data=JSON.parse(msg);
                    console.log(data)
                    alert(data.code);
                }
            })
        })
// });
    </script>
</body>

</html>