首页
所有分类
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 相关文章推荐
JavaScript.The.Good.Parts阅读笔记（二）作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 Javascript
jquery简单倒计时实现方法
Dec 18 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
小程序Request的另类用法详解
Aug 09 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
东芝(1) 手调机(1) 德劲(5) PL-880(1) ICF-7600(1) 天线(6) TOSHIBA(1) RP-F11(1) SONY(15) 索尼(5)
You might like
PHP图片裁剪函数（保持图像不变形）
2014/05/04 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
javascript滚轮事件基础实例讲解（37）
2017/02/14 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
全面解读Python Web开发框架Django
2014/06/30 Python
Python中的引用和拷贝浅析
2014/11/22 Python
python 的列表遍历删除实现代码
2020/04/12 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
python操作mysql代码总结
2018/06/01 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
Python实现自动访问网页的例子
2020/02/21 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
体育教育专业自荐信范文
2013/12/20 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
小学综治宣传月活动总结
2014/07/02 职场文书
员工2014年度工作总结
2014/12/09 职场文书
同意转租证明
2015/06/24 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
2019七夕节祝福语36句，快来收藏吧
2019/08/06 职场文书
基于JavaScript实现省市联动效果
2021/06/22 Javascript
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android
nginx配置指令之server_name的具体使用
2022/08/14 Servers