jq 滑动拼图验证已适配移动端

滑块验证

html

		<div class="yz">
		  <div class="img">
		    <i class="refresh"></i>
		    <img class="bg" src="52-big.jpg" alt="" />　　
		    <img class="bg-part" src="52-small.png" alt="" />　　
		    <div></div>
		  </div>
		  <div class="hd">
		    <p>按住左边滑块，拖动完成上方拼图</p>
		    <div class="hk">→</div>
		    <div class="hk_bg"></div>
		  </div>
		</div>

css

	  .yz {
        margin: 0 auto;
        width: 690px;
        user-select: none;
      }
      .img {
        width: 100%;
        position: relative;
      }
      .img .bg {
        width: 100%;
      }
      .img .bg-part {
        position: absolute;
        top: 0;
        left: 0;
      }
      .img > i.refresh {
        position: absolute;
        display: block;
        top: 2px;
        right: 2px;
        width: 25px;
        height: 25px;
        cursor: pointer;
        background: url(./refresh.png);
        background-position: center;
        background-size: contain;
      }
      .img div.success {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(255, 255, 255, 0.7);
        cursor: pointer;
      }
      .img div > p {
        margin: 0;
        text-align: center;
        position: absolute;
        color: #0066b3;
      }
      .hd {
        position: relative;
        width: 100%;
        height: 30px;
        background: #ebebee;
        border-radius: 20px;
      }
      .hd p {
        height: 30px;
        margin: 0;
        line-height: 30px;
        text-align: center;
        color: #8c8888;
      }
      .hd .hd-bg {
        height: 30px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
      }
      .hd .hk {
        position: absolute;
        border-radius: 20px;
        height: 30px;
        top: 0;
        left: 0;
        line-height: 30px;
        color: #fff;
        z-index: 10;
        font-weight: 900;
        text-align: center;
        cursor: pointer;
        background: #0066b3;
      }

      .hd .hk_bg {
        position: absolute;
        top: 0;
        left: 0;
        height: 30px;
        background: #0066b3;
        opacity: 0.6;
        border-radius: 20px;
      }
      .hd .hk.error,
      .hd .hk_bg.error {
        background: #ffb552;
      }
      .hd .hk.success,
      .hd .hk_bg.success {
        background: #29ce70;
      }

      @media screen and (max-width:750px){
        .yz{
          width: 100%;
        }
      }

js

$(function () {
      var initWidth = 690, // 初始大小
        initHeight = 200,
        actualWidth = $('.img').width(), // 实际大小
        actualHeight = $('.img').height(), // 实际大小
        hkWidth = 70,
        dragWidth, // x
        dragTop, // y
        dragErr, // 误差
        errSend = 0, // 滑动次数
        startTime, // 开始时间
        fixedLeft, // 正确位置
        isSuccess = false, // 成功
        isSlide = true, // 滑动开关
        // /
        dragTop = 66;
        dragWidth = 1320;
        dragErr = 10;
        fixedLeft = dragWidth / 3 - dragErr;
        // /
      if(initWidth!=actualWidth){
        var v = initWidth/actualWidth
        initWidth = initWidth/v
        dragTop = dragTop/v
        hkWidth = hkWidth/v
        fixedLeft = fixedLeft/v
        console.log(dragTop/v);
        console.log(hkWidth/v);
      }
      

      $(".bg-part").css({ top: dragTop,width:hkWidth });
      $(".hd .hk").css("width", hkWidth);
      $(".hd .hk_bg").css("width", hkWidth);
      $(".hk").on({
        mousedown: function (e) {
          if (!isSlide) {
            return;
          }
          var pageX = e.pageX, // 鼠标位置
            _this = $(this);
            startTime = new Date().getTime();
          $(document).on({
            mousemove: function (e) {
              ak_slide(e, pageX, _this);
            },
            mouseup: function () {
              ak_lift(_this);
            },
          });
        },
        touchstart: function (e) {
          e = e.originalEvent.targetTouches[0];
          var pageX = e.pageX, // 鼠标位置
            _this = $(this);
            startTime = new Date().getTime();
          $(document).on({
            touchmove: function (e) {
              e = e.originalEvent.targetTouches[0];
              ak_slide(e, pageX, _this);
            },
            touchend: function () {
              ak_lift(_this);
            },
          });
        },
      });
      
      function ak_lift(a) {
        errSend++;
        if (isSuccess) {
          var time = (new Date().getTime() - startTime) / 1000;
          $(".img div")
            .addClass("success")
            .html("<p>太棒了<br>您仅用了" + time + "秒就完成了验证！</p>");
          $(a).addClass("success").html("√").css("left", fixedLeft);
          $(".bg-part").css("left", fixedLeft);
          $(".hd .hk_bg")
            .addClass("success")
            .css("width", fixedLeft + hkWidth);
          isSlide = !isSlide;
          verify_ok();
        } else {
          setTimeout(function () {
            $(a).html("→").removeClass("error");
            $(".hd .hk_bg").removeClass("error");
          }, 500);
          $(a).html("×").addClass("error").animate({ left: 0 }, 500);
          $(".bg-part").animate({ left: 0 }, 500);
          $(".hd .hk_bg")
            .removeClass("active")
            .addClass("error")
            .animate({ width: hkWidth }, 500);
          if (errSend >= 3) {
            errSend = 0;
            changeImg();
          }
        }
        $(document).off("mousemove").off("mouseup").off("touchmove").off("touchend");
      }

      function ak_slide(e, b, c) {
        var x = e.pageX - b;
        distance = initWidth - hkWidth;
        if (x < 0) {
          x = 0;
        } else if (x > distance) {
          x = distance;
        }
        if (x >= fixedLeft - 5 && x <= fixedLeft + 5) {
          x = fixedLeft;
          isSuccess = true;
        } else {
          isSuccess = false;
        }
        $(c).css("left", x);
        $(".bg-part").css("left", x);
        $(".hk_bg").css("width", x + hkWidth);
      }
      $(".img>.refresh").on("click", function () {
        changeImg();
      });
      function changeImg() {
        alert("换图");
      }
      function verify_ok() {
        alert("成功！");
      }
    });

所需图片

大图
补丁图
重置

以上为简单实现
我已经封装好了slide.js
大图比例是69:20
补丁宽度 70
本次接口返回参数：

{
  "status":"1", // 成功
  "data":{
    "backFilePath":"/imageDragVerify/27-small", // 补丁图
    "distance2Top":"84", // y位置
    "dragWidth":"1284", // x位置的3倍
    "imgDragVerifyDeviation":10, // 误差
    "upFilePath":"/imageDragVerify/27-big" // 大图
  }
}