首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onSeptember 29, 2020

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

老样子，还是先看效果

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

原理和上篇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="" />
        <div class="sliderOver" id="sliderOver"></div>
        <div class="smartImg" id="smartImg">
          <img class="simg" src="" />
        </div>
      </div>
      <div class="sliderBox">
        <div class="sliderF" id="slider">
          <div class="sliderS" id="sliderBtn">
            <img class="icon" src="images/slider/sangangy.png" />
          </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 src="slider.js"></script>
<script>
  var object = {
    bImg: 'imgWrap',
    sImg: 'smartImg',
    sImgOver: 'sliderOver',
    sliderF: 'slider',
    sliderBtn: 'sliderBtn',
    sliderBg: 'bgC_left',
    refreshBtn: 'sliderRefresh',
    range: 5,
    imgArr: ['images/sliderz/1.jpg', 'images/sliderz/2.jpg', 'images/sliderz/3.jpg', 'images/sliderz/4.jpg',
      'images/sliderz/5.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>

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

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

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

- Author -

一码平川！

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 Javascript
js+cavans实现图片滑块验证
Sep 29 #Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 #Javascript
原生JavaScript实现刮刮乐
Sep 29 #Javascript
原生JavaScript实现拖动校验功能
Sep 29 #Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 #Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 #Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 #Javascript
Three.js(1) 查询效率(1) Express(1) 条形码(1) group by(1) kubernetes(1) HBuilder(1) delete in(1) GPU(1) 分布式追踪(1)
You might like
php中几种常见安全设置详解
2010/04/06 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
php可变长参数处理函数详解
2017/02/22 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
jquery转盘抽奖功能实现
2015/11/13 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
SublimeText 2编译python出错的解决方法（The system cannot find the file specified）
2013/11/27 Python
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
Python深度优先算法生成迷宫
2018/01/22 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
python与pycharm有何区别
2020/07/01 Python
django下创建多个app并设置urls方法
2020/08/02 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
英国索普公园票务和酒店套餐：Thorpe Breaks
2019/09/14 全球购物
Alexandre Birman美国官网：亚历山大·伯曼
2019/10/30 全球购物
工厂保洁员岗位职责
2013/12/04 职场文书
村党支部换届选举方案
2014/05/02 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis