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

网络编程 2024/11/19 佚名

3 1 2

之前写过一篇uniapp框架的滑块验证，今天抽个空用原生js实现这个功能，pc端暂时不做，因为pc端只要把touch事件改成mouse事件就能实现，这里就不再重复写了。
(最新完美版本，js+canvas实现，兼容pc，ie9和移动，js+cavans实现图片滑块验证)

老样子，还是先看效果

原理和上篇uniapp的滑块一样，不一样的是这里是纯js实现，代码是全部是自己写的，有不清楚的可以留言。

下面是全部代码：

html:

<!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>Document</title>
  <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: 60px;
      font-size: 18px;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
    }
 
    .cont {
      position: relative;
      background: #fff;
      width: 300px;
      border-radius: 8px;
      overflow: hidden;
      padding-bottom: 20px;
    }
 
    .imgWrap {
      position: relative;
      width: 280px;
      height: 150px;
      border-radius: 8px;
      margin: 0 auto;
      overflow: hidden;
    }
 
    #sliderRefresh {
      position: absolute;
      top: 20px;
      right: 30px;
      cursor: pointer;
      color: green;
    }
 
    .img {
      display: block;
      width: 100%;
      height: 100%;
    }
 
    .sliderOver {
      position: absolute;
      left: 0;
      top: 0;
      width: 50px;
      height: 50px;
      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: 50px;
      height: 50px;
      overflow: hidden;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }
 
    .simg {
      position: absolute;
      display: block;
      width: 280px;
      height: 150px;
    }
 
 
 
 
    .sliderBox {
      width: 280px;
      margin: 10px auto 0;
      height: 36px;
      position: relative;
    }
 
    .sliderF {
      width: 100%;
      height: 100%;
      z-index: 3;
    }
 
    .sliderS {
      cursor: pointer;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      height: 36px;
      width: 36px;
      background: #007cff;
      border-radius: 36px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
 
    .icon {
      width: 20px;
      height: 20px;
 
    }
 
 
    .bgC {
      position: absolute;
      z-index: 1;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      height: 30px;
      border-radius: 30px;
      line-height: 30px;
      font-size: 14px;
      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: 28px;
      border-top-left-radius: 28px;
      border-bottom-left-radius: 28px;
      line-height: 28px;
      font-size: 14px;
      background-color: #eee;
      box-shadow: inset 0 0 4px #ccc;
      text-align: center;
    }
 
 
    .showMessage {
      text-align: center;
      font-size: 14px;
      height: 30px;
      line-height: 30px;
    }
 
    #closeBtn {
      position: fixed;
      z-index: 10;
      bottom: 10px;
      left: 50%;
    }
  </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="/UploadFiles/2021-04-02/">

js部分（slider.js）


(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 "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;
})()


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js移动端图片滑块验证,js移动端图片验证,js移动端滑块验证

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“js实现移动端图片滑块验证功能”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月19日

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

vue实现井字棋游戏

js+cavans实现图片滑块验证

评论“js实现移动端图片滑块验证功能”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接