js实现移动端图片滑块验证功能

最新推荐文章于 2023-08-10 11:55:50 发布
最新推荐文章于 2023-08-10 11:55:50 发布
阅读量1.7k 收藏 9
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qdm13209211861/article/details/114068388
版权

一、移动端实现方法：
1、使用这种验证方法的目的：为了证明当前的用户不是机器人~防止恶意操作。
2、实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>验证码滑块</title>
  <script>
    (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          if (clientWidth >= 750) {
            docEl.style.fontSize = '100px';
          } else {
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
          }
          var html = document.getElementsByTagName('html')[0];
          var settedFs = settingFs = parseInt(100 * (clientWidth / 750));
          var whileCount = 0;
          while (true) {
            var realFs = parseInt(window.getComputedStyle(html).fontSize);
            var delta = realFs - settedFs;
            //不相等
            if (Math.abs(delta) >= 1) {
              if (delta > 0)
                settingFs--;
              else
                settingFs++;
              html.setAttribute('style', 'font-size:' + settingFs + 'px!important');
            } else
              break;
            if (whileCount++ > 100)
              break
          }
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
  </script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .sliderModel {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      display: none;
    }

    .title {
      width: 100%;
      height: 1.2rem;
      font-size: .36rem;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cont {
      position: relative;
      background: #fff;
      width: 6rem;
      border-radius: .16rem;
      overflow: hidden;
      padding-bottom: .2rem;
    }

    .imgWrap {
      position: relative;
      width: 5.6rem;
      height: 3rem;
      border-radius: .16rem;
      margin: 0 auto;
      overflow: hidden;
    }

    #sliderRefresh {
      font-size: .32rem;
      position: absolute;
      top: .4rem;
      right: .6rem;
      cursor: pointer;
      color: green;
    }

    .img {
      display: block;
      width: 100%;
      height: 100%;
    }

    .sliderOver {
      position: absolute;
      left: 0;
      top: 0;
      width: 1rem;
      height: 1rem;
      background: #ddd;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    }

    .smartImg {
      position: absolute;
      z-index: 2;
      left: 0;
      top: 0;
      width: 1rem;
      height: 1rem;
      overflow: hidden;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }

    .simg {
      position: absolute;
      display: block;
      width: 5.6rem;
      height: 3rem;
    }

    .sliderBox {
      width: 5.6rem;
      margin: .3rem auto 0;
      height: .72rem;
      position: relative;
    }

    .sliderF {
      width: 100%;
      height: 100%;
      z-index: 3;
    }

    .sliderS {
      cursor: pointer;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      height: .72rem;
      width: .72rem;
      border-radius: .72rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .icon {
      width: .4rem;
      height: .4rem;
    }

    .bgC {
      position: absolute;
      z-index: 1;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      height: .6rem;
      border-radius: .6rem;
      line-height: .6rem;
      font-size: .28rem;
      color: #999999;
      box-shadow: inset 0 0 4px #ccc;
      text-align: center;
      overflow: hidden;
    }

    .bgC_left {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: .56rem;
      border-top-left-radius: .56rem;
      border-bottom-left-radius: .56rem;
      line-height: .56rem;
      font-size: .28rem;
      background-color: #eee;
      box-shadow: inset 0 0 4px #ccc;
      text-align: center;
    }

    .showMessage {
      text-align: center;
      font-size: .28rem;
      height: .6rem;
      line-height: .6rem;
    }

    #closeBtn {
      position: fixed;
      z-index: 10;
      bottom: .2rem;
      left: 50%;
    }

    .btn {
      width: .72rem;
      height: .72rem;
      position: absolute;
      border: 1px solid #ccc;
      cursor: move;
      font-family: "宋体";
      text-align: center;
      line-height: .72rem;
      background-color: #fff;
      user-select: none;
      color: #666;
      font-size: .32rem;
    }
  </style>
</head>

<body>
  <div id="clickBtn">点击</div>
  <div class="sliderModel">
    <div class="cont">
      <div class="title">图形验证</div>
      <div id="sliderRefresh">刷新</div>
      <div class="imgWrap" id="imgWrap">
        <img class="img" src="img/1.jpg" />
        <div class="sliderOver" id="sliderOver"></div>
        <div class="smartImg" id="smartImg">
          <img class="simg" src="img/1.jpg" />
        </div>
      </div>
      <div class="sliderBox">
        <div class="sliderF" id="slider">
          <div class="sliderS" id="sliderBtn">
            <div class="btn">&gt;&gt;</div>
          </div>
        </div>
        <div class="bgC">
          拖动左边滑块完成上方拼图
          <div class="bgC_left" id="bgC_left"></div>
        </div>
      </div>
      <div class="showMessage"></div>
    </div>
  </div>
  <div id="closeBtn">关闭</div>
</body>
<script>
  var object = {
    bImg: 'imgWrap',
    sImg: 'smartImg',
    sImgOver: 'sliderOver',
    sliderF: 'slider',
    sliderBtn: 'sliderBtn',
    sliderBg: 'bgC_left',
    refreshBtn: 'sliderRefresh',
    range: 5,
    imgArr: ['img/2.jpg', 'img/3.jpg', 'img/4.jpg'],
    refreshCallback: function (e) {
      var showMessage = document.getElementsByClassName('showMessage')[0];
      showMessage.innerHTML = "";
      showMessage.style.color = "#333";
    },
    callback: function (e) {
      var showMessage = document.getElementsByClassName('showMessage')[0];
      if (!e) {
        showMessage.innerHTML = "验证失败，请重新验证";
        showMessage.style.color = "red";
      } else {
        showMessage.innerHTML = "验证成功！";
        showMessage.style.color = "green";
      }
    },
  }
  var mSlider = null;
  document.getElementById('clickBtn').onclick = function () {
    document.getElementsByClassName('sliderModel')[0].style.display = "flex";
    mSlider = new window.mobileSlider(object)
  }
  document.getElementById('closeBtn').onclick = function () {
    document.getElementsByClassName('sliderModel')[0].style.display = "none";
  }
</script>

</html>
<script>
    (function () {
      function mobileSlider(params) {
        var object = {
          bImg: params.bImg, //大图片的盒子
          sImg: params.sImg, //图片上的小图片
          sImgOver: params.sImgOver, //图片上的占位区域
          sliderF: params.sliderF, //滑块的父元素
          sliderBtn: params.sliderBtn, //滑块
          sliderBg: params.sliderBg, //滑块滑动过程中的背景块
          refreshBtn: params.refreshBtn, //刷新按钮
          range: params.range, //验证通过的运行范围值
          imgArr: params.imgArr, //图片数组
          refreshCallback: params.refreshCallback, //刷新回调
          callback: params.callback //验证回调函数，true为成功，false为失败
        };
        var sliderF = document.getElementById(object.sliderF);
        var sliderBtn = document.getElementById(object.sliderBtn);
        var sliderBg = document.getElementById(object.sliderBg);
        var sImg = document.getElementById(object.sImg);
        var bImg = document.getElementById(object.bImg);
        var sImgOver = document.getElementById(object.sImgOver);
        var refreshBtn = document.getElementById(object.refreshBtn);
        var max_left = sliderF.offsetWidth - sliderBtn.offsetWidth;
        var sImgBeginLeft = 0;

        function refresh() {
          sliderBtn.style.left = sliderBg.style.width = 0;
          sImgBeginLeft = 0;
          var ram = Math.random();
          var imgIndex = Math.floor(object.imgArr.length * ram);
          var imgSrc = object.imgArr[imgIndex];
          bImg.getElementsByClassName('img')[0].src = sImg.getElementsByClassName('simg')[0].src = imgSrc;
          sImgOver.style.left = Math.floor(bImg.offsetWidth / 2 + bImg.offsetWidth / 2 * ram - sImgOver.offsetWidth - 6) + "px";
          sImg.style.left = sImgBeginLeft = Math.floor((bImg.offsetWidth / 2 - sImgOver.offsetWidth) * ram) + "px";
          sImgOver.style.top = sImg.style.top = Math.floor((bImg.offsetHeight - sImgOver.offsetWidth - 10) * ram + 10) + "px";
          sImg.getElementsByClassName('simg')[0].style.left = -Math.floor(bImg.offsetWidth / 2 + bImg.offsetWidth / 2 * ram - sImgOver.offsetWidth - 6) + "px";
          sImg.getElementsByClassName('simg')[0].style.top = -Math.floor((bImg.offsetHeight - sImgOver.offsetWidth - 10) * ram + 10) + "px";
          object.refreshCallback(true)
        }
        refresh();

        sliderBtn.ontouchstart = function (e) {
          var ev = e || window.event
          var downX = ev.touches[0].pageX;
          var sImgLeft = parseInt(sImg.style.left);
          this.ontouchmove = function (e) {
            var ev = e || window.event;
            var leftX = ev.touches[0].pageX - downX;
            leftX = leftX < 0 ? 0 : (leftX < max_left ? leftX : max_left)
            sliderBtn.style.left = leftX + 'px';
            sliderBg.style.width = leftX + sliderBtn.offsetWidth / 2 + "px";
            sImg.style.left = leftX + sImgLeft + "px";
          }
          this.ontouchend = function (e) {
            this.ontouchmove = null; //移除移动事件
            var sImgLeft = parseInt(sImg.style.left);
            var sImgOverLeft = parseInt(sImgOver.style.left);
            if (Math.abs(sImgOverLeft - sImgLeft) < object.range) {
              object.callback && object.callback(true)
            } else {
              object.callback && object.callback(false)
              var timer = null,
                step = 10;
              var sliderBtnLeft = parseInt(sliderBtn.style.left)
              timer = setInterval(function () {
                sliderBtnLeft -= step;
                step += 5;
                if (sliderBtnLeft <= 0) {
                  clearInterval(timer);
                  sliderBtnLeft = 0;
                  sliderBtn.style.left = sliderBg.style.width = 0;
                  sImg.style.left = parseInt(sImgBeginLeft) + "px"
                }
                sliderBtn.style.left = sliderBg.style.width = sliderBtnLeft + "px";
                sImg.style.left = sliderBtnLeft + parseInt(sImgBeginLeft) + "px"
              }, 20)
            }
          }
        };
        refreshBtn.ontouchstart = function () {
          refresh()
        }
      }
      window.mobileSlider = mobileSlider;
    })()
</script>

3、效果图如下：
在这里插入图片描述
二、pc端添加滑动验证，可以参考这篇博客
https://blog.csdn.net/tel13259437538/article/details/79822694

我爱画页面
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js图片滑动验证
06-28
js编写的滑动验证码，未编译ES6语法，canvas裁剪出滑块和背景图
深入解析数美滑块验证码破解：从抓包到实现（JavaScript版）
最新发布
2401_85453564的博客
06-23 641
数美滑块验证码是一种常见的安全验证方式，用于防止自动化脚本和机器人进行恶意操作。本文将详细介绍如何通过抓包获取滑块图片信息、分析加密参数、生成滑动轨迹等步骤，成功破解数美滑块验证码。在滑动滑块的过程中，我们需要分析加密参数。通过在浏览器中设置断点，我们可以找到参数aw等的生成函数，并确定这些参数的加密方式。首先，进入数美滑块验证码的演示页面，进行抓包操作以获取滑块验证码的前景和背景图片。滑动轨迹可以通过模拟人的滑动行为来生成，包括一些随机的抖动和速度变化。最后，结合前面的步骤，实现滑块破解。
html滑动验证图片,js实现移动端图片滑块验证功能
weixin_39758041的博客
06-04 631
之前写过一篇uniapp框架的滑块验证，今天抽个空用原生js实现这个功能，pc端暂时不做，因为pc端只要把touch事件改成mouse事件就能实现，这里就不再重复写了。(最新完美版本，js+canvas实现，兼容pc，ie9和移动，js+cavans实现图片滑块验证)老样子，还是先看效果原理和上篇uniapp的滑块一样，不一样的是这里是纯js实现，代码是全部是自己写的，有不清楚的可以留言。下面是全...
JS滑动图片验证
qq_43005276的博客
11-25 496
HTML <div class="container"> <div id="captcha" style="position: relative"></div> </div> CSS <style type="text/css"> .container { width: 310px; margin: 100px auto; }
图片滑动验证JS+后台完整版
11-08
后端采用python+flask+redis，简易实现图片验证功能，如需复杂验证，请记录鼠标拖动轨迹，后端实现分析，有兴趣的朋友可以试试
vue滑块验证，图片验证，图片旋转验证，滑动验证
04-26
在前端开发中，为了保障网站的...在开发过程中，开发者还需要了解并掌握ECMAScript（JavaScript的标准化规范）、前端构建工具（如Webpack）、以及可能涉及的后端接口设计和安全策略，以确保验证功能的完整性和安全性。
原生js移动端滑块验证
06-01
在本项目中，我们将讨论如何使用原生JavaScript实现一个无依赖的移动端滑块验证功能。 首先，我们需要创建HTML结构。在`index.html`文件中，可以设置一个包含滑块容器和滑块元素的简单布局： ```html ...
jQuery实现移动端滑块拖动验证跳转特效源码.zip
11-19
在本文中，我们将深入探讨jQuery在移动端滑块验证中的应用，以及如何实现跳转特效。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在滑块验证中，jQuery可以方便地...
纯JS打造的滑块拼图验证
06-14
良心制作，只为分享，下载了某人的资源，还很高分，结果不是缺这个就是缺那个，不能用，浪费了好多分，鄙视。此资源为纯JS制作，本人已经根据自己项目实际进行了改动，您下载之后，请根据自己项目需求自行调整
js jquery 图片滑动 验证
xxpxxpoo8的专栏
05-09 268
图片可以自定义 初始状态 成功状态 失败状态 下载地址
滑动图片验证的JS插件
07-19
滑动图片验证的JS插件，随机获取图片库中的图片，然后使用canvas裁剪生成，鼠标向右滑动，将缺失部分图片滑动到对应的位置，坐标位置，计算拖动速度等等来判断是否人为操作.
滑动验证兼容pc和移动
08-30
结合jquery-slider.js工具和ft-slider.js工具，兼容pc和移动端的滑动解锁验证demo
通过js实现滑块验证（简略版）
Alphamilk的博客
12-13 3016
通过js方面快速掌握滑块验证原理并且能够简单实现该功能块
js图片滑动验证码
流绪@微梦
11-02 7363
效果图： 1.css .container { width: 310px; margin: 100px auto; } input { display: block; width: 290px; line-height: 40px; margin: 10px 0; padding: 0 10px; outline: none; border:1px solid...
js手机滑块模仿
weixin_30698527的博客
04-29 202
点击文本框滑动选值 手机屏幕上的上下翻滚菜单使用JS实现.经过十几个小时的折磨,终于有了最初版本.实现办法如下描述: 一.要求和方法 1.一个input输入框,点击后弹出一个翻滚菜单盖在其上,翻滚选好后,点击确定.所选值就到了文本框里. 2.实现这个翻滚菜单使用如下办法:一个菜单DIV,里面是若干菜单项SPAN.菜单DIV设置有竖直滚动条,这样就能滚动菜单项....
基于canvas、JavaScript实现滑动图片拼图验证
灰色头像@的博客
08-10 1102
程序最重要的是滑块5，其它元素都随5的移动而变化。
滑动拼图验证码 免费 java_js+canvas实现滑动拼图验证码功能
weixin_39815310的博客
03-02 610
上图为网易云盾的滑动拼图验证码，其应该有一个专门的图片库，裁剪的位置是固定的。我的想法是，随机生成图片，随机生成位置，再用canvas裁剪出滑块和背景图。下面介绍具体步骤。首先随便找一张图片渲染到canvas上，这里#canvas作为画布，#block作为裁剪出来的小滑块。var canvas = document.getElementById('canvas')var block = docum...
js实现滑动拼图验证码
asd53564967的博客
07-20 3872
js实现滑动拼图验证码样子展示
JavaScript+Canvas实现跨平台图片滑块验证代码分享
"本文主要介绍了如何使用JavaScript与Canvas技术实现一个兼容PC和移动端的图片滑块验证功能。提供的代码示例展示了一个简单的实现方法，包括HTML结构、CSS样式以及JavaScript逻辑。" 在Web开发中，图片滑块验证是一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值